trustify-ui/client/src/app/pages/advisory-details/overview.tsx at 6fefbf36d5bfc00d0178066ba5fb2adc0f0f1c91 · carlosthe19916/trustify-ui · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import type React from "react";

import prettyBytes from "pretty-bytes";

import {
  Card,
  CardBody,
  CardTitle,
  DescriptionList,
  DescriptionListDescription,
  DescriptionListGroup,
  DescriptionListTerm,
  Grid,
  GridItem,
} from "@patternfly/react-core";

import { extendedSeverityFromSeverity } from "@app/api/models";
import type { AdvisorySummary, Severity } from "@app/client";
import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
import { formatDate } from "@app/utils/utils";

interface InfoProps {
  advisory: AdvisorySummary;
}

export const Overview: React.FC<InfoProps> = ({ advisory }) => {
  return (
    <Grid hasGutter>
      <GridItem md={4}>
        <Card isFullHeight>
          <CardTitle>Overview</CardTitle>
          <CardBody>
            <DescriptionList>
              <DescriptionListGroup>
                <DescriptionListTerm>Title</DescriptionListTerm>
                <DescriptionListDescription>
                  {advisory.title}
                </DescriptionListDescription>
              </DescriptionListGroup>
              <DescriptionListGroup>
                <DescriptionListTerm>Type</DescriptionListTerm>
                <DescriptionListDescription>
                  {advisory.labels.type}
                </DescriptionListDescription>
              </DescriptionListGroup>
              <DescriptionListGroup>
                <DescriptionListTerm>Aggregate Severity</DescriptionListTerm>
                <DescriptionListDescription>
                  <SeverityShieldAndText
                    value={extendedSeverityFromSeverity(
                      advisory.average_severity as Severity,
                    )}
                    score={advisory.average_score}
                    showLabel
                    showScore
                  />
                </DescriptionListDescription>
              </DescriptionListGroup>
              <DescriptionListGroup>
                <DescriptionListTerm>Size</DescriptionListTerm>
                <DescriptionListDescription>
                  {prettyBytes(advisory.size)}
                </DescriptionListDescription>
              </DescriptionListGroup>
            </DescriptionList>
          </CardBody>
        </Card>
      </GridItem>
      <GridItem md={4}>
        <Card isFullHeight>
          <CardTitle>Publisher</CardTitle>
          <CardBody>
            <DescriptionList>
              <DescriptionListGroup>
                <DescriptionListTerm>Name</DescriptionListTerm>
                <DescriptionListDescription>
                  {advisory.issuer?.name}
                </DescriptionListDescription>
              </DescriptionListGroup>
              <DescriptionListGroup>
                <DescriptionListTerm>Contact details</DescriptionListTerm>
                <DescriptionListDescription>
                  {advisory.issuer?.website}
                </DescriptionListDescription>
              </DescriptionListGroup>
            </DescriptionList>
          </CardBody>
        </Card>
      </GridItem>
      <GridItem md={4}>
        <Card isFullHeight>
          <CardTitle>Tracking</CardTitle>
          <CardBody>
            <DescriptionList>
              <DescriptionListGroup>
                <DescriptionListTerm>ID</DescriptionListTerm>
                <DescriptionListDescription>
                  {advisory.identifier}
                </DescriptionListDescription>
              </DescriptionListGroup>
              <DescriptionListGroup>
                <DescriptionListTerm>Initial release date</DescriptionListTerm>
                <DescriptionListDescription>
                  {formatDate(advisory.published)}
                </DescriptionListDescription>
              </DescriptionListGroup>
              <DescriptionListGroup>
                <DescriptionListTerm>Current release date</DescriptionListTerm>
                <DescriptionListDescription>
                  {formatDate(advisory.modified)}
                </DescriptionListDescription>
              </DescriptionListGroup>
            </DescriptionList>
          </CardBody>
        </Card>
      </GridItem>
    </Grid>
  );
};