Merge pull request #2 from eresearchqut/ERP-2024-Past-Incidents-Compo…

…nent

[ERP-2024] Added Past incident component

src/components/pastIncidents/PastIncidents.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { PastIncidents } from "./PastIncidents";
+
+export default {
+  title: "Component/PastIncidents",
+  component: PastIncidents,
+} as Meta<typeof PastIncidents>;
+
+const Template: StoryFn<typeof PastIncidents> = (args) => (
+  <PastIncidents {...args} />
+);
+
+export const Simple = Template.bind({});
+Simple.args = {
+  title: "Past Incidents",
+  subTitle: "Showing all past incidents in the last 6 months",
+  lastUpdated: "2024-07-02T15:53:42+1000",
+  incidents: [
+    {
+      reported: "2024-04-16T10:53:42+1000",
+      reason: "PB Server - service disrupted",
+    },
+    {
+      reported: "2024-02-12T09:43:42+1000",
+      reason: "HPC-FS Scheduled maintenance",
+    },
+    {
+      reported: "2023-12-13T06:33:42+1000",
+      reason: "PB Server - service disrupted",
+    },
+    {
+      reported: "2023-10-19T07:33:32+1000",
+      reason: "HPC-FS Scheduled maintenance",
+    },
+  ],
+};
+
+export const NoDataAvailable = Template.bind({});
+NoDataAvailable.args = {
+  incidents: undefined,
+};

src/components/pastIncidents/PastIncidents.tsx

@@ -0,0 +1,66 @@
+import React, { FunctionComponent } from "react";
+import {
+  Text,
+  Flex,
+  Box,
+  Table,
+  Tbody,
+  Tr,
+  Td,
+  TableContainer,
+} from "@chakra-ui/react";
+
+interface Incident {
+  reported: string;
+  reason: string;
+}
+
+export interface PastIncidentsProps {
+  title: string;
+  subTitle: string;
+  lastUpdated: string;
+  incidents: Incident[];
+}
+
+export const PastIncidents: FunctionComponent<PastIncidentsProps> = ({
+  title,
+  subTitle,
+  lastUpdated = "",
+  incidents = [],
+}) => {
+  if (incidents.length === 0) return null;
+
+  return (
+    <Box>
+      <Flex direction="column" px={6} py={4}>
+        <Text as="b" fontSize="3xl">
+          {title}
+        </Text>
+        <Text fontSize="1xl">{subTitle}</Text>
+        {lastUpdated !== "" && (
+          <Text fontSize="1x1">Last Updated: {lastUpdated}</Text>
+        )}
+      </Flex>
+      <TableContainer>
+        <Table>
+          <Tbody>
+            {incidents.map((incident: any, index: number) => (
+              <Tr key={index}>
+                <Td>
+                  <Text fontSize="2xl" as="b">
+                    {incident?.reported}
+                  </Text>
+                  <Text fontSize="1xl" my={2}>
+                    {incident?.reason}
+                  </Text>
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default PastIncidents;

src/components/pastIncidents/index.ts

@@ -0,0 +1 @@
+export { PastIncidents, type PastIncidentsProps } from "./PastIncidents";