tracker/frontend/src/SummaryGroup.js at result-processor-pubsub · 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
import React from 'react'
import { Trans, t } from '@lingui/macro'
import { useLingui } from '@lingui/react'
import { useToast, SimpleGrid } from '@chakra-ui/core'
import SummaryCard from './SummaryCard'
import { string } from 'prop-types'
import theme from './theme/canada'
import { useQuery } from '@apollo/client'
import { WEB_AND_EMAIL_SUMMARIES } from './graphql/queries'

const { colors } = theme

export function SummaryGroup() {
  const { i18n } = useLingui()
  const toast = useToast()

  const { loading, error, data } = useQuery(WEB_AND_EMAIL_SUMMARIES, {
    onError: ({ message }) => {
      toast({
        title: 'Error',
        description: message,
        status: 'failure',
        duration: 9000,
        isClosable: true,
      })
    },
  })

  if (error) {
    return <p>{String(error)}</p>
  }

  if (loading) {
    return (
      <p>
        <Trans>Loading...</Trans>
      </p>
    )
  }

  return (
    <SimpleGrid
      columns={[1, 1, 1, 2]}
      spacing="30px"
      justifyItems="center"
      maxWidth="width.60"
      mx="auto"
      p="8"
    >
      <SummaryCard
        title={i18n._(t`Web Configuration`)}
        description={i18n._(t`Web encryption settings summary`)}
        categoryDisplay={{
          'full-fail': {
            name: i18n._(t`Non-compliant TLS`),
            color: colors.weak,
          },
          'partial-pass': {
            name: i18n._(t`Partially-compliant TLS`),
            color: colors.moderate,
          },
          'full-pass': {
            name: i18n._(t`Policy compliant TLS`),
            color: colors.strong,
          },
        }}
        data={data.webSummary}
      />
      <SummaryCard
        title={i18n._(t`Email Configuration`)}
        description={i18n._(t`Email security settings summary`)}
        categoryDisplay={{
          'full-pass': {
            name: i18n._(t`Dmarc pass`),
            color: colors.strong,
          },
          'partial-pass': {
            name: i18n._(t`Dmarc partial`),
            color: colors.moderate,
          },
          'full-fail': {
            name: i18n._(t`Dmarc fail`),
            color: colors.weak,
          },
        }}
        data={data.emailSummary}
      />
    </SimpleGrid>
  )
}

SummaryGroup.propTypes = {
  title: string,
  description: string,
}