Skip to content

Scan domain changes #2840

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
EveningStarlight merged 9 commits into from
Aug 19, 2021
Merged

Scan domain changes #2840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f6bd789
add StatusIcon component
Aug 16, 2021
65fdf07
use LoadingMessage more often in ScanDomain
Aug 16, 2021
26deef3
use StatusIcon on ScanDomain
Aug 16, 2021
523a10b
fix 'test' typo
Aug 16, 2021
7a4dcfc
add optional chaining
Aug 16, 2021
8771271
remove oneTimeScansLoading
Aug 16, 2021
fa1cf7f
fix mocking crash on ScanDomains
Aug 17, 2021
2cc010d
fix mocker subscription
Aug 17, 2021
4f26383
update email loading message
Aug 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 23 additions & 13 deletions frontend/mocking/mocker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,9 +648,9 @@ const schemaWithMocks = addMocksToSchema({
const dkimScanData = store.get('DkimSub', scanUuid)
setTimeout(() => {
pubsub.publish(
`${NEW_DKIM_DATA_STREAM}/$.parameters.userKey{
`${NEW_DKIM_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`.parameters.userKey,
}`,
{
dkimScanData: dkimScanData,
},
Expand All @@ -661,9 +661,9 @@ const schemaWithMocks = addMocksToSchema({
const dmarcScanData = store.get('DmarcSub', scanUuid)
setTimeout(() => {
pubsub.publish(
`${NEW_DMARC_DATA_STREAM}/$.parameters.userKey{
`${NEW_DMARC_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`.parameters.userKey,
}`,
{
dmarcScanData: dmarcScanData,
},
Expand All @@ -674,9 +674,9 @@ const schemaWithMocks = addMocksToSchema({
const spfScanData = store.get('SpfSub', scanUuid)
setTimeout(() => {
pubsub.publish(
`${NEW_SPF_DATA_STREAM}/$.parameters.userKey{
`${NEW_SPF_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`.parameters.userKey,
}`,
{
spfScanData: spfScanData,
},
Expand All @@ -687,9 +687,9 @@ const schemaWithMocks = addMocksToSchema({
const httpsScanData = store.get('HttpsSub', scanUuid)
setTimeout(() => {
pubsub.publish(
`${NEW_HTTPS_DATA_STREAM}/$.parameters.userKey{
`${NEW_HTTPS_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`.parameters.userKey,
}`,
{
httpsScanData: httpsScanData,
},
Expand Down Expand Up @@ -809,31 +809,41 @@ const schemaWithMocks = addMocksToSchema({
dkimScanData: {
subscribe: (_, _args, context) =>
pubsub.asyncIterator(
`${NEW_DKIM_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
`${NEW_DKIM_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`,
),
},
dmarcScanData: {
subscribe: (_, _args, context) =>
pubsub.asyncIterator(
`${NEW_DMARC_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
`${NEW_DMARC_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`,
),
},
spfScanData: {
subscribe: (_, _args, context) =>
pubsub.asyncIterator(
`${NEW_SPF_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
`${NEW_SPF_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`,
),
},
httpsScanData: {
subscribe: (_, _args, context) =>
pubsub.asyncIterator(
`${NEW_HTTPS_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
`${NEW_HTTPS_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`,
),
},
sslScanData: {
subscribe: (_, _args, context) =>
pubsub.asyncIterator(
`${NEW_SSL_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
`${NEW_SSL_DATA_STREAM}/${
jwt.decode(context.token, 'secret').parameters.userKey
}`,
),
},
},
Expand Down
28 changes: 28 additions & 0 deletions frontend/src/components/StatusIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react'
import { string } from 'prop-types'
import { Spinner } from '@chakra-ui/react'
import { CheckCircleIcon, WarningIcon, InfoIcon } from '@chakra-ui/icons'

export function StatusIcon({ status }) {
if (status === 'PASS') {
return (
<CheckCircleIcon color="strong" size="icons.sm" aria-label="passes" />
)
} else if (status === 'FAIL') {
return <WarningIcon color="weak" size="icons.sm" aria-label="fails" />
} else if (status === 'LOADING') {
return <Spinner color="accent" size="sm" />
} else {
return (
<InfoIcon
color="info"
size="icons.sm"
aria-label="Information not sufficient, please view guidance"
/>
)
}
}

StatusIcon.propTypes = {
status: string.isRequired,
}
205 changes: 60 additions & 145 deletions frontend/src/domains/ScanDomain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
Divider,
Flex,
Heading,
Spinner,
Stack,
Tab,
TabList,
Expand All @@ -23,19 +22,16 @@ import {
Text,
useToast,
} from '@chakra-ui/react'
import {
CheckCircleIcon,
WarningIcon,
WarningTwoIcon,
InfoIcon,
} from '@chakra-ui/icons'
import { WarningTwoIcon } from '@chakra-ui/icons'
import { useMutation, useQuery } from '@apollo/client'
import { object, string } from 'yup'

import { DomainField } from './DomainField'
import { StatusBadge } from './StatusBadge'

import { ScanCategoryDetails } from '../guidance/ScanCategoryDetails'
import { LoadingMessage } from '../components/LoadingMessage'
import { StatusIcon } from '../components/StatusIcon'
import { fieldRequirements } from '../utilities/fieldRequirements'
import { GET_ONE_TIME_SCANS } from '../graphql/queries'
import { REQUEST_SCAN } from '../graphql/mutations'
Expand Down Expand Up @@ -120,8 +116,6 @@ export function ScanDomain() {
})
}

// TODO: Create list of collapsable scan detail cards

const dmarcSteps = {
assess: [
t`Identify all domains and subdomains used to send mail;`,
Expand All @@ -147,16 +141,16 @@ export function ScanDomain() {
],
}

const generateStatusIcon = (status) => {
let statusIcon
if (status === 'PASS') {
statusIcon = <CheckCircleIcon color="strong" size="icons.sm" />
} else if (status === 'FAIL') {
statusIcon = <WarningIcon color="weak" size="icons.sm" />
} else {
statusIcon = <InfoIcon color="info" size="icons.sm" />
}
return statusIcon
const statusGroupingProps = {
flexDirection: { base: 'column', md: 'row' },
border: '1px solid',
borderColor: 'gray.300',
borderRadius: 'md',
px: { base: 2, md: 0 },
py: { base: 1, md: 2 },
mx: { base: 0, md: 1 },
my: { base: 2, md: 0 },
bg: 'gray.100',
}

return (
Expand Down Expand Up @@ -237,116 +231,50 @@ export function ScanDomain() {
flexDirection={{ base: 'column', md: 'row' }}
flexGrow={{ base: 0, md: '1' }}
>
<Box mx={{ md: 2 }}>
<Stack
align="center"
flexDirection={{ base: 'row', md: 'column' }}
justifyContent="space-between"
spacing={0}
>
<Text
fontWeight="bold"
fontSize="sm"
mb={{ base: 0, md: '2' }}
mr={{ base: '2', md: 0 }}
>
HTTPS:
</Text>
{mergedScan.scan.https ? (
generateStatusIcon(mergedScan.scan.https.status)
) : (
<Spinner color="accent" size="sm" />
)}
</Stack>
</Box>
<Box mx={{ md: 2 }}>
<Stack
align="center"
flexDirection={{ base: 'row', md: 'column' }}
justifyContent="space-between"
spacing={0}
>
<Text
fontWeight="bold"
fontSize="sm"
mb={{ base: 0, md: '2' }}
mr={{ base: '2', md: 0 }}
>
SSL:
</Text>
{mergedScan.scan.ssl ? (
generateStatusIcon(mergedScan.scan.ssl.status)
) : (
<Spinner color="accent" size="sm" />
)}
</Stack>
</Box>
<Box mx={{ md: 2 }}>
<Stack
align="center"
flexDirection={{ base: 'row', md: 'column' }}
justifyContent="space-between"
spacing={0}
>
<Text
fontWeight="bold"
fontSize="sm"
mb={{ base: 0, md: '2' }}
mr={{ base: '2', md: 0 }}
>
SPF:
</Text>
{mergedScan.scan.spf ? (
generateStatusIcon(mergedScan.scan.spf.status)
) : (
<Spinner color="accent" size="sm" />
)}
</Stack>
</Box>
<Box mx={{ md: 2 }}>
<Stack
align="center"
flexDirection={{ base: 'row', md: 'column' }}
justifyContent="space-between"
spacing={0}
>
<Text
fontWeight="bold"
fontSize="sm"
mb={{ base: 0, md: '2' }}
mr={{ base: '2', md: 0 }}
>
DKIM:
</Text>
{mergedScan.scan.dkim ? (
generateStatusIcon(mergedScan.scan.dkim.status)
) : (
<Spinner color="accent" size="sm" />
)}
</Stack>
</Box>
<Box mx={{ md: 2 }}>
<Stack
align="center"
flexDirection={{ base: 'row', md: 'column' }}
justifyContent="space-between"
spacing={0}
>
<Text
fontWeight="bold"
fontSize="sm"
mb={{ base: 0, md: '2' }}
mr={{ base: '2', md: '0' }}
>
DMARC:
</Text>
{mergedScan.scan.dmarc ? (
generateStatusIcon(mergedScan.scan.dmarc.status)
) : (
<Spinner color="accent" size="sm" />
)}
</Stack>
</Box>
<Flex {...statusGroupingProps}>
<StatusBadge
text="HTTPS:"
status={
mergedScan.scan?.https
? mergedScan.scan.https.status
: 'LOADING'
}
/>
<StatusBadge
text="SSL:"
status={
mergedScan.scan?.ssl
? mergedScan.scan.ssl.status
: 'LOADING'
}
/>
</Flex>
<Flex {...statusGroupingProps}>
<StatusBadge
text="SPF:"
status={
mergedScan.scan?.spf
? mergedScan.scan.spf.status
: 'LOADING'
}
/>
<StatusBadge
text="DKIM:"
status={
mergedScan.scan?.dkim
? mergedScan.scan.dkim.status
: 'LOADING'
}
/>
<StatusBadge
text="DMARC:"
status={
mergedScan.scan?.dmarc
? mergedScan.scan.dmarc.status
: 'LOADING'
}
/>
</Flex>
<Divider
orientation={{ base: 'horizontal', md: 'vertical' }}
alignSelf="stretch"
Expand Down Expand Up @@ -393,10 +321,7 @@ export function ScanDomain() {
mergedScan.scan.https.status === 'PASS' &&
mergedScan.scan.ssl.status === 'PASS' ? (
<Stack isInline align="center" px="2">
<CheckCircleIcon
color="strong"
size="icons.sm"
/>
<StatusIcon status="PASS" />
<Text fontWeight="bold" fontSize="2xl">
<Trans>ITPIN Compliant</Trans>
</Text>
Expand All @@ -415,12 +340,7 @@ export function ScanDomain() {
</Stack>
)
) : (
<Stack isInline align="center" px="2">
<Spinner color="accent" size="md" />
<Text fontWeight="bold" fontSize="2xl">
<Trans>Loading Compliance Status</Trans>
</Text>
</Stack>
<LoadingMessage>One Time Scan</LoadingMessage>
)}
</Box>
<Accordion allowMultiple defaultIndex={[0, 1]}>
Expand Down Expand Up @@ -493,12 +413,7 @@ export function ScanDomain() {
)}
</Box>
) : (
<Stack isInline align="center" px="2">
<Spinner color="accent" size="md" />
<Text fontWeight="bold" fontSize="2xl">
<Trans>Loading DMARC Phase</Trans>
</Text>
</Stack>
<LoadingMessage>One Time Scan</LoadingMessage>
)}
</Box>
<Accordion allowMultiple defaultIndex={[0, 1, 2]}>
Expand Down
Loading