RSS link in footer. After/Before changed to From/To with To made inclusive. Add severity to errata detail page

apollo/ui/src/components/Overview.tsx

@@ -264,7 +264,7 @@ export const Overview = () => {
         </HStack>
         <HStack>
           <FormControl width="180px" flexShrink={0} flexGrow={1}>
-            <FormLabel fontSize="sm">After</FormLabel>
+            <FormLabel fontSize="sm">From</FormLabel>
             <Input
               type="date"
               variant="filled"
@@ -297,7 +297,7 @@ export const Overview = () => {
             />
           </FormControl>
           <FormControl width="180px" flexShrink={0} flexGrow={1}>
-            <FormLabel fontSize="sm">Before</FormLabel>
+            <FormLabel fontSize="sm">To</FormLabel>
             <Input
               type="date"
               variant="filled"
@@ -321,7 +321,9 @@ export const Overview = () => {
 
                 const [year, month, date] = newVal.split('-').map(Number);
 
-                setFilterBefore(new Date(year, month - 1, date));
+                setFilterBefore(
+                  new Date(year, month - 1, date, 23, 59, 59, 59) // Set to 1ms prior to midnight to be inclusive of selected date
+                );
               }}
             />
           </FormControl>
@@ -404,7 +406,7 @@ export const Overview = () => {
       ) : (
         <Box backgroundColor="white" boxShadow="base">
           <TableContainer>
-            <Table size="sm" variant="striped">
+            <Table size="sm">
               <Thead>
                 <Tr>
                   <Th {...stickyProps} width="36px" />
@@ -412,12 +414,7 @@ export const Overview = () => {
                   <Th {...stickyProps}>Synopsis</Th>
                   <Th {...stickyProps}>Type / Severity</Th>
                   <Th {...stickyProps}>Products</Th>
-                  <Th {...stickyProps}>
+                  <Th {...stickyProps}>Issue Date</Th>
-                    <HStack spacing={1}>
-                      <Text>Issue Date</Text>
-                      <ChevronDownIcon />
-                    </HStack>
-                  </Th>
                 </Tr>
               </Thead>
               <Tbody>
@@ -428,12 +425,16 @@ export const Overview = () => {
                     </Td>
                   </Tr>
                 )}
-                {advisories?.map((a) => (
+                {advisories?.map((a, idx) => (
                   <Tr key={a.name}>
-                    <Td textAlign="center" pr={0}>
+                    <Td
+                      backgroundColor={idx % 2 ? 'gray.50' : undefined}
+                      textAlign="center"
+                      pr={0}
+                    >
                       {severityToBadge(a.severity)}
                     </Td>
-                    <Td>
+                    <Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
                       <Link
                         className="text-peridot-primary visited:text-purple-500"
                         to={`/${a.name}`}
@@ -441,20 +442,22 @@ export const Overview = () => {
                         {a.name}
                       </Link>
                     </Td>
-                    <Td>
+                    <Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
                       {a.synopsis?.replace(
                         /^(Critical|Important|Moderate|Low): /,
                         ''
                       )}
                     </Td>
-                    <Td>
+                    <Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
                       {typeToText(a.type)}
                       {a.type === V1AdvisoryType.Security
                         ? ` / ${severityToText(a.severity)}`
                         : ''}
                     </Td>
-                    <Td>{a.affectedProducts?.join(', ')}</Td>
+                    <Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
-                    <Td>
+                      {a.affectedProducts?.join(', ')}
+                    </Td>
+                    <Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
                       {Intl.DateTimeFormat(undefined, {
                         day: '2-digit',
                         month: 'short',

apollo/ui/src/components/Root.tsx

@@ -30,7 +30,7 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-import { Box, HStack, Text } from '@chakra-ui/react';
+import { Box, HStack, Text, Link as ChakraLink } from '@chakra-ui/react';
 import { RESFLogo } from 'common/ui/RESFLogo';
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -79,6 +79,38 @@ export const Root = () => {
           <Route path="/:id" component={ShowErrata} />
         </Switch>
       </Box>
+      <Box
+        py="6"
+        px="4"
+        backgroundColor="gray.700"
+        color="white"
+        display="flex"
+      >
+        <ChakraLink
+          href="/api/v2/advisories:rss"
+          isExternal
+          display="flex"
+          alignItems="center"
+        >
+          <Box
+            as="svg"
+            viewBox="0 0 24 24"
+            width="18px"
+            height="18px"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            display="block"
+            mr={1.5}
+          >
+            <path d="M4 11a9 9 0 019 9M4 4a16 16 0 0116 16" />
+            <circle cx="5" cy="19" r="1" />
+          </Box>
+          <span>RSS</span>
+        </ChakraLink>
+      </Box>
     </Box>
   );
 };

apollo/ui/src/components/ShowErrata.tsx

@@ -53,8 +53,15 @@ import {
   UnorderedList,
   VStack,
 } from '@chakra-ui/react';
-import { severityToBadge, typeToText } from 'apollo/ui/src/enumToText';
+import {
-import { V1Advisory } from 'bazel-bin/apollo/proto/v1/client_typescript';
+  severityToBadge,
+  severityToText,
+  typeToText,
+} from 'apollo/ui/src/enumToText';
+import {
+  V1Advisory,
+  V1AdvisoryType,
+} from 'bazel-bin/apollo/proto/v1/client_typescript';
 import { reqap } from 'common/ui/reqap';
 import React, { useState } from 'react';
 import { RouteComponentProps } from 'react-router';
@@ -239,6 +246,11 @@ export const ShowErrata = (props: ShowErrataProps) => {
                   <Text>
                     <b>Type:</b> {typeToText(errata.type)}
                   </Text>
+                  {errata.type === V1AdvisoryType.Security && (
+                    <Text>
+                      <b>Severity:</b> {severityToText(errata.severity)}
+                    </Text>
+                  )}
                   <Box>
                     <Text fontWeight="bold">
                       Affected Product