tracker/frontend/src/ScanCard.js at setup-cluster-network-policies · LearningAzure2020/tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React from 'react'
import { Box, Heading, Icon, Stack, Text } from '@chakra-ui/core'
import { any, object, string } from 'prop-types'
import ScanCategoryDetails from './ScanCategoryDetails'
import WithPseudoBox from './withPseudoBox'
import { t, Trans } from '@lingui/macro'

function ScanCard({ scanType, scanData, status }) {
  const cardTitle =
    scanType === 'web'
      ? t`Web Scan Results`
      : scanType === 'email'
      ? t`Email Scan Results`
      : ''
  const cardDescription =
    scanType === 'web'
      ? t`Results for scans of web technologies (SSL, HTTPS).`
      : scanType === 'email'
      ? t`Results for scans of email technologies (DMARC, SPF, DKIM).`
      : ''

  const topInfo = () => {
    if (scanType === 'web') {
      return (
        <Box pb="1">
          {status.https === 'PASS' && status.ssl === 'PASS' ? (
            <Stack isInline align="center" px="2">
              <Icon name="check-circle" color="strong" size="icons.md" />
              <Text fontWeight="bold" fontSize="2xl">
                <Trans>ITPIN Compliant</Trans>
              </Text>
            </Stack>
          ) : (
            <Stack isInline align="center" px="2">
              <Icon name="warning-2" color="moderate" size="icons.md" />
              <Text fontWeight="bold" fontSize="2xl">
                <Trans>Changes Required for ITPIN Compliance</Trans>
              </Text>
            </Stack>
          )}
        </Box>
      )
    } else if (scanType === 'email') {
      if (status === null) {
        status = 'UNKNOWN'
      }
      return (
        <Box pb="1">
          <Stack isInline align="center" px="2">
            <Text fontWeight="bold" fontSize="2xl">
              <Trans>DMARC Implementation Phase: {status.toUpperCase()}</Trans>
            </Text>
          </Stack>
        </Box>
      )
    } else {
      return ''
    }
  }

  const scanCategories = ['https', 'ssl', 'dmarc', 'spf', 'dkim']

  const categoryList = Object.entries(scanData)
    .filter(([categoryName, _categoryData]) =>
      scanCategories.includes(categoryName),
    )
    .map(([categoryName, categoryData]) => {
      return (
        <ScanCategoryDetails
          categoryName={categoryName}
          categoryData={categoryData}
          key={categoryName}
        />
      )
    })

  return (
    <Box bg="white" rounded="lg" overflow="hidden" boxShadow="medium" pb="1">
      <Box bg="primary" color="gray.50">
        <Stack px="3" py="1">
          <Heading as="h1" size="lg">
            {cardTitle}
          </Heading>
          <Text fontSize={['md', 'lg']}>{cardDescription}</Text>
        </Stack>
      </Box>
      <Box>
        <Stack spacing="30px" px="1" mt="1">
          {topInfo()}
          {categoryList}
        </Stack>
      </Box>
    </Box>
  )
}

export default WithPseudoBox(ScanCard)

ScanCard.propTypes = {
  scanType: string,
  scanData: object,
  status: any,
}