2023-05-24 20:27:57 +00:00
|
|
|
|
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
|
2023-02-13 13:46:56 +00:00
|
|
|
|
import Head from "next/head";
|
|
|
|
|
|
import { Grid, Box } from "@mui/material";
|
|
|
|
|
|
import { useTranslate } from "react-polyglot";
|
|
|
|
|
|
import { Layout } from "components/Layout";
|
|
|
|
|
|
import { getTrends } from "lib/opensearch";
|
|
|
|
|
|
import { PageHeader } from "components/PageHeader";
|
|
|
|
|
|
import { VisualizationCard } from "components/VisualizationCard";
|
|
|
|
|
|
import { useAppContext } from "components/AppProvider";
|
|
|
|
|
|
|
2023-05-24 20:27:57 +00:00
|
|
|
|
type TrendsProps = {
|
|
|
|
|
|
visualizations: any;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const Trends: NextPage<TrendsProps> = ({ visualizations }) => {
|
2023-02-13 13:46:56 +00:00
|
|
|
|
const t = useTranslate();
|
|
|
|
|
|
const {
|
|
|
|
|
|
colors: { cdrLinkOrange },
|
|
|
|
|
|
typography: { h1, h4, p },
|
|
|
|
|
|
} = useAppContext();
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Layout>
|
|
|
|
|
|
<Head>
|
|
|
|
|
|
<title>Digital Threat Dashboard – Leafcutter</title>
|
|
|
|
|
|
</Head>
|
|
|
|
|
|
<PageHeader backgroundColor={cdrLinkOrange}>
|
|
|
|
|
|
<Grid
|
|
|
|
|
|
container
|
|
|
|
|
|
direction="row"
|
|
|
|
|
|
spacing={2}
|
|
|
|
|
|
justifyContent="space-between"
|
|
|
|
|
|
alignItems="center"
|
|
|
|
|
|
>
|
|
|
|
|
|
{/* <Grid item xs={3} sx={{ textAlign: "center" }}>
|
|
|
|
|
|
<Image src={SearchCreateHeader} width={200} height={200} alt="" />
|
|
|
|
|
|
</Grid> */}
|
|
|
|
|
|
<Grid item container direction="column" xs={12}>
|
|
|
|
|
|
<Grid item>
|
|
|
|
|
|
<Box component="h1" sx={{ ...h1 }}>
|
|
|
|
|
|
{t("trendsTitle")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
<Grid item>
|
|
|
|
|
|
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
|
|
|
|
|
|
{t("trendsSubtitle")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
<Grid>
|
|
|
|
|
|
<Box component="p" sx={{ ...p }}>
|
|
|
|
|
|
{t("trendsDescription")}
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
</PageHeader>
|
|
|
|
|
|
<Grid
|
|
|
|
|
|
container
|
|
|
|
|
|
direction="row"
|
|
|
|
|
|
wrap="wrap"
|
|
|
|
|
|
spacing={3}
|
|
|
|
|
|
justifyContent="space-between"
|
|
|
|
|
|
>
|
2023-05-24 20:27:57 +00:00
|
|
|
|
{visualizations.map((visualization: any, index: number) => (
|
2023-02-13 13:46:56 +00:00
|
|
|
|
<VisualizationCard
|
|
|
|
|
|
key={index}
|
|
|
|
|
|
id={visualization.id}
|
|
|
|
|
|
title={visualization.title}
|
|
|
|
|
|
description={visualization.description}
|
|
|
|
|
|
url={visualization.url}
|
|
|
|
|
|
/>
|
|
|
|
|
|
))}
|
|
|
|
|
|
</Grid>
|
|
|
|
|
|
</Layout>
|
|
|
|
|
|
);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export default Trends;
|
|
|
|
|
|
|
|
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (
|
|
|
|
|
|
context: GetServerSidePropsContext
|
|
|
|
|
|
) => {
|
2023-05-25 12:37:14 +00:00
|
|
|
|
const visualizations = await getTrends(25);
|
2023-02-13 13:46:56 +00:00
|
|
|
|
|
2023-05-25 12:37:14 +00:00
|
|
|
|
return { props: { visualizations } };
|
2023-02-13 13:46:56 +00:00
|
|
|
|
};
|
