sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

App directory refactoring

Browse source
This commit is contained in:
Darren Clarke 2023-06-26 10:07:12 +00:00 • committed by GitHub
parent a53a26f4c0
commit b312a8c862
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
153 changed files with 1532 additions and 1447 deletions
Download patch file Download diff file Expand all files Collapse all files

35
apps/leafcutter/app/_components/AboutBox.tsx Normal file
View file

@ -0,0 +1,35 @@
"use client";
import { FC, PropsWithChildren } from "react";
import { Box } from "@mui/material";
import { useAppContext } from "./AppProvider";
type AboutBoxProps = PropsWithChildren<{
backgroundColor: string;
}>;
export const AboutBox: FC<AboutBoxProps> = ({
backgroundColor,
children,
}: any) => {
const {
colors: { white },
} = useAppContext();
return (
<Box
sx={{
width: "100%",
backgroundColor,
color: white,
p: 4,
borderRadius: "10px",
mt: "66px",
mb: "22px",
textAlign: "center",
}}
>
{children}
</Box>
);
};

68
apps/leafcutter/app/_components/AboutFeature.tsx Normal file
View file

@ -0,0 +1,68 @@
"use client";
import { FC } from "react";
import Image from "next/legacy/image";
import { Grid, Box, GridSize } from "@mui/material";
import AboutDots from "images/about-dots.png";
import { useAppContext } from "./AppProvider";
interface AboutFeatureProps {
title: string;
description: string;
direction: "row" | "row-reverse";
image: any;
showBackground: boolean;
textColumns: number;
}
export const AboutFeature: FC<AboutFeatureProps> = ({
title,
description,
direction,
image,
showBackground,
textColumns,
}) => {
const {
typography: { h2, p },
} = useAppContext();
return (
<Box
sx={{
p: "20px",
mt: "40px",
backgroundImage: showBackground ? `url(${AboutDots.src})` : "",
backgroundSize: "200px 200px",
backgroundPosition: direction === "row" ? "20% 50%" : "80% 50%",
backgroundRepeat: "no-repeat",
}}
>
<Grid
direction={direction}
container
spacing={5}
alignContent="flex-start"
>
<Grid item xs={textColumns as GridSize}>
<Box component="h2" sx={h2}>
{title}
</Box>
<Box component="p" sx={p}>
{description}
</Box>
</Grid>
<Grid
item
xs={(12 - textColumns) as GridSize}
container
direction={direction}
>
<Box sx={{ width: "150px", mt: "-20px" }}>
<Image src={image} alt="" objectFit="contain" />
</Box>
</Grid>
</Grid>
</Box>
);
};

55
apps/leafcutter/app/_components/AccountButton.tsx Normal file
View file

@ -0,0 +1,55 @@
"use client";
import { FC } from "react";
import Image from "next/legacy/image";
import { signOut } from "next-auth/react";
import { Button, Box, Menu, MenuItem } from "@mui/material";
import { useTranslate } from "react-polyglot";
import UserIcon from "images/user-icon.png";
import {
usePopupState,
bindTrigger,
bindMenu,
} from "material-ui-popup-state/hooks";
import { useAppContext } from "./AppProvider";
export const AccountButton: FC = () => {
const t = useTranslate();
const {
colors: { leafcutterElectricBlue },
} = useAppContext();
const popupState = usePopupState({ variant: "popover", popupId: "account" });
return (
<>
<Button
{...bindTrigger(popupState)}
color="secondary"
sx={{
backgroundColor: leafcutterElectricBlue,
width: "40px",
height: "40px",
minWidth: "40px",
p: 0,
borderRadius: "500px",
":hover": {
backgroundColor: leafcutterElectricBlue,
opacity: 0.8,
},
}}
>
<Image src={UserIcon} alt="account" width={30} height={30} />
</Button>
<Menu {...bindMenu(popupState)}>
<MenuItem
onClick={() => {
popupState.close();
signOut({ callbackUrl: "/" });
}}
>
<Box sx={{ width: "100%" }}>{t("signOut")}</Box>
</MenuItem>
</Menu>
</>
);
};

161
apps/leafcutter/app/_components/AppProvider.tsx Normal file
View file

@ -0,0 +1,161 @@
"use client";
import {
FC,
createContext,
useContext,
useReducer,
useState,
PropsWithChildren,
} from "react";
import { colors, typography } from "styles/theme";
const basePath = process.env.GITLAB_CI
? "/link/link-stack/apps/leafcutter"
: "";
const imageURL = (image: any) =>
typeof image === "string" ? `${basePath}${image}` : `${basePath}${image.src}`;
const AppContext = createContext({
colors,
typography,
imageURL,
query: null as any,
updateQuery: null as any,
updateQueryType: null as any,
replaceQuery: null as any,
clearQuery: null as any,
foundCount: 0,
setFoundCount: null as any,
});
export const AppProvider: FC<PropsWithChildren> = ({ children }) => {
const initialState = {
incidentType: {
display: "Incident Type",
queryType: "include",
values: [],
},
relativeDate: {
display: "Relative Date",
queryType: null,
values: [],
},
startDate: {
display: "Start Date",
queryType: null,
values: [],
},
endDate: {
display: "End Date",
queryType: null,
values: [],
},
targetedGroup: {
display: "Targeted Group",
queryType: "include",
values: [],
},
platform: {
display: "Platform",
queryType: "include",
values: [],
},
device: {
display: "Device",
queryType: "include",
values: [],
},
service: {
display: "Service",
queryType: "include",
values: [],
},
maker: {
display: "Maker",
queryType: "include",
values: [],
},
country: {
display: "Country",
queryType: "include",
values: [],
},
subregion: {
display: "Subregion",
queryType: "include",
values: [],
},
continent: {
display: "Continent",
queryType: "include",
values: [],
},
};
const reducer = (state: any, action: any) => {
const key = action.payload?.[0];
if (!key) {
throw new Error("Unknown key");
}
const newState = { ...state };
switch (action.type) {
case "UPDATE":
newState[key].values = action.payload[key].values;
return newState;
case "UPDATE_TYPE":
newState[key].queryType = action.payload[key].queryType;
return newState;
case "REPLACE":
return Object.keys(action.payload).reduce((acc: any, cur: string) => {
if (["startDate", "endDate"].includes(cur)) {
const rawDate = action.payload[cur].values[0];
const date = new Date(rawDate);
acc[cur] = {
...action.payload[cur],
values: rawDate && date ? [date] : [],
};
} else {
acc[cur] = action.payload[cur];
}
return acc;
}, {});
case "CLEAR":
return initialState;
default:
throw new Error("Unknown action type");
}
};
const [query, dispatch] = useReducer(reducer, initialState);
const updateQuery = (payload: any) => dispatch({ type: "UPDATE", payload });
const updateQueryType = (payload: any) =>
dispatch({ type: "UPDATE_TYPE", payload });
const replaceQuery = (payload: any) => dispatch({ type: "REPLACE", payload });
const clearQuery = () => dispatch({ type: "CLEAR" });
const [foundCount, setFoundCount] = useState(0);
return (
<AppContext.Provider
// eslint-disable-next-line react/jsx-no-constructed-context-values
value={{
colors,
typography,
imageURL,
query,
updateQuery,
updateQueryType,
replaceQuery,
clearQuery,
foundCount,
setFoundCount,
}}
>
{children}
</AppContext.Provider>
);
};
export function useAppContext() {
return useContext(AppContext);
}

42
apps/leafcutter/app/_components/Button.tsx Normal file
View file

@ -0,0 +1,42 @@
"use client";
import { FC } from "react";
import Link from "next/link";
import { Button as MUIButton } from "@mui/material";
import { useAppContext } from "./AppProvider";
interface ButtonProps {
text: string;
color: string;
href: string;
}
export const Button: FC<ButtonProps> = ({ text, color, href }) => {
const {
colors: { white, almostBlack },
} = useAppContext();
return (
<Link href={href} passHref>
<MUIButton
variant="contained"
disableElevation
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
color:
color === white
? `${almostBlack} !important`
: `${white} !important`,
borderRadius: 999,
backgroundColor: color,
padding: "6px 30px",
margin: "20px 0px",
whiteSpace: "nowrap",
}}
>
{text}
</MUIButton>
</Link>
);
};

115
apps/leafcutter/app/_components/Footer.tsx Normal file
View file

@ -0,0 +1,115 @@
"use client";
import { FC } from "react";
import { Container, Grid, Box, Button } from "@mui/material";
import { useTranslate } from "react-polyglot";
import Image from "next/legacy/image";
import Link from "next/link";
import leafcutterLogo from "images/leafcutter-logo.png";
import footerLogo from "images/footer-logo.png";
import twitterLogo from "images/twitter-logo.png";
import gitlabLogo from "images/gitlab-logo.png";
import { useAppContext } from "./AppProvider";
export const Footer: FC = () => {
const t = useTranslate();
const {
colors: { white, leafcutterElectricBlue },
typography: { bodySmall },
} = useAppContext();
const smallLinkStyles: any = {
...bodySmall,
color: white,
textTransform: "none",
};
return (
<Box
sx={{
backgroundColor: leafcutterElectricBlue,
backgroundImage: `url(${footerLogo})`,
backgroundBlendMode: "overlay",
backgroundPosition: "bottom left",
backgroundRepeat: "no-repeat",
backgroundSize: "30%",
marginTop: "40px",
marginLeft: "300px",
}}
>
<Container sx={{ pt: 4, pb: 4 }}>
<Grid
container
direction="row"
wrap="nowrap"
justifyContent="space-between"
>
<Grid
item
container
direction="row"
wrap="nowrap"
sx={{ maxHeight: "auto" }}
>
<Grid item sx={{ width: 50, ml: 2, mr: 4 }}>
<Image src={leafcutterLogo} alt="CDR logo" />
</Grid>
</Grid>
<Grid item sx={{ color: "white" }}>
{t("contactUs")}
</Grid>
</Grid>
</Container>
<Box sx={{ backgroundColor: leafcutterElectricBlue }}>
<Container>
<Grid
item
container
direction="row"
justifyContent="space-between"
wrap="nowrap"
alignItems="center"
>
<Grid
item
container
direction="row"
spacing={1}
alignItems="center"
>
<Grid item>
<Box component="p" sx={{ ...bodySmall, color: white }}>
©️ {t("copyright")}
</Box>
</Grid>
<Grid item>
<Link href="/about/privacy" passHref>
<Button variant="text" sx={smallLinkStyles}>
{t("privacyPolicy")}
</Button>
</Link>
</Grid>
<Grid item>
<Link href="/about/code-practice" passHref>
<Button variant="text" sx={smallLinkStyles}>
{t("codeOfPractice")}
</Button>
</Link>
</Grid>
</Grid>
<Grid item sx={{ width: 40, p: 1, pl: 0 }}>
<a href="https://gitlab.com/digiresilience">
<Image src={gitlabLogo} alt="Gitlab logo" />
</a>
</Grid>
<Grid item sx={{ width: 40, p: 1, pr: 0 }}>
<a href="https://twitter.com/cdr_tech">
<Image src={twitterLogo} alt="Twitter logo" />
</a>
</Grid>
</Grid>
</Container>
</Box>
</Box>
);
};

136
apps/leafcutter/app/_components/GettingStartedDialog.tsx Normal file
View file

@ -0,0 +1,136 @@
"use client";
import { FC, useState } from "react";
import { Dialog, Box, Grid, Checkbox, IconButton } from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { useRouter } from "next/router";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
type CheckboxItemProps = {
title: string;
description: string;
checked: boolean;
onChange: () => void;
};
const CheckboxItem: FC<CheckboxItemProps> = ({
title,
description,
checked,
onChange,
}) => {
const {
typography: { p, small },
} = useAppContext();
return (
<Grid item container spacing={0}>
<Grid
item
container
spacing={0}
sx={{ backgroundColor: "white" }}
wrap="nowrap"
>
<Grid item xs={1}>
<Checkbox checked={checked} onChange={onChange} sx={{ mt: "-8px" }} />
</Grid>
<Grid
item
container
direction="column"
spacing={0}
xs={11}
sx={{ pl: 2 }}
>
<Grid item>
<Box sx={{ ...p, fontWeight: "bold" }}>{title}</Box>
</Grid>
<Grid item>
<Box sx={small}>{description}</Box>
</Grid>
</Grid>
</Grid>
</Grid>
);
};
export const GettingStartedDialog: FC = () => {
const {
colors: { almostBlack },
typography: { h4 },
} = useAppContext();
const t = useTranslate();
const [completedItems, setCompletedItems] = useState([] as any[]);
const router = useRouter();
const open = router.query.tooltip?.toString() === "checklist";
const toggleCompletedItem = (item: any) => {
if (completedItems.includes(item)) {
setCompletedItems(completedItems.filter((i) => i !== item));
} else {
setCompletedItems([...completedItems, item]);
}
};
return (
<Dialog
open={open}
maxWidth="xs"
PaperProps={{
sx: { position: "absolute", bottom: 8, right: 8, borderRadius: 3 },
}}
hideBackdrop
disableEnforceFocus
disableAutoFocus
onBackdropClick={undefined}
>
<Grid container direction="column" spacing={2} sx={{ p: 3 }}>
<Grid item>
<Grid container direction="row" justifyContent="space-between">
<Grid item>
<Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box>
</Grid>
<Grid item>
<IconButton onClick={() => router.push(router.pathname)}>
<CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} />
</IconButton>
</Grid>
</Grid>
<Grid container direction="column" spacing={2}>
<CheckboxItem
title={t("searchTitle")}
description={t("searchDescription")}
checked={completedItems.includes("search")}
onChange={() => toggleCompletedItem("search")}
/>
<CheckboxItem
title={t("createVisualizationTitle")}
description={t("createVisualizationDescription")}
checked={completedItems.includes("create")}
onChange={() => toggleCompletedItem("create")}
/>
<CheckboxItem
title={t("saveTitle")}
description={t("saveDescription")}
checked={completedItems.includes("save")}
onChange={() => toggleCompletedItem("save")}
/>
<CheckboxItem
title={t("exportTitle")}
description={t("exportDescription")}
checked={completedItems.includes("export")}
onChange={() => toggleCompletedItem("export")}
/>
<CheckboxItem
title={t("shareTitle")}
description={t("shareDescription")}
checked={completedItems.includes("share")}
onChange={() => toggleCompletedItem("share")}
/>
</Grid>
</Grid>
</Grid>
</Dialog>
);
};

44
apps/leafcutter/app/_components/HelpButton.tsx Normal file
View file

@ -0,0 +1,44 @@
"use client";
import { FC, useState } from "react";
import { useRouter } from "next/router";
import { Button } from "@mui/material";
import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material";
import { useAppContext } from "./AppProvider";
export const HelpButton: FC = () => {
const router = useRouter();
const [helpActive, setHelpActive] = useState(false);
const {
colors: { leafcutterElectricBlue },
} = useAppContext();
const onClick = () => {
if (helpActive) {
router.push(router.pathname);
} else {
router.push("/?tooltip=welcome");
}
setHelpActive(!helpActive);
};
return (
<Button
color="primary"
onClick={onClick}
sx={{
backgroundColor: leafcutterElectricBlue,
width: "40px",
height: "40px",
minWidth: "40px",
p: 0,
borderRadius: "500px",
":hover": {
backgroundColor: leafcutterElectricBlue,
opacity: 0.8,
},
}}
>
<QuestionMarkIcon width="30px" height="30px" htmlColor="white" />
</Button>
);
};

100
apps/leafcutter/app/_components/Home.tsx Normal file
View file

@ -0,0 +1,100 @@
"use client";
import { useEffect, FC } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import ReactMarkdown from "react-markdown";
import { Grid, Button } from "@mui/material";
import { useTranslate } from "react-polyglot";
import { useCookies } from "react-cookie";
import { Welcome } from "@/app/_components/Welcome";
import { WelcomeDialog } from "@/app/_components/WelcomeDialog";
import { VisualizationCard } from "@/app/_components/VisualizationCard";
import { useAppContext } from "@/app/_components/AppProvider";
type HomeProps = {
visualizations: any;
embedded: boolean;
};
export const Home: FC<HomeProps> = ({ visualizations, embedded }) => {
const router = useRouter();
const cookieName = "homeIntroComplete";
const [cookies, setCookie] = useCookies([cookieName]);
const t = useTranslate();
const {
colors: { white, leafcutterElectricBlue },
typography: { h4 },
} = useAppContext();
const homeIntroComplete = parseInt(cookies[cookieName], 10) || 0;
useEffect(() => {
if (homeIntroComplete === 0) {
setCookie(cookieName, `${1}`, { path: "/" });
router.push(`${router.pathname}?tooltip=welcome`);
}
}, [homeIntroComplete, router, setCookie]);
return (
<>
<Welcome />
<Grid
container
spacing={3}
sx={{ pt: "22px", pb: "22px" }}
direction="row-reverse"
>
<Link href="/create" passHref>
<Button
sx={{
fontSize: 14,
borderRadius: 500,
color: leafcutterElectricBlue,
border: `2px solid ${leafcutterElectricBlue}`,
fontWeight: "bold",
textTransform: "uppercase",
pl: 6,
pr: 5,
":hover": {
backgroundColor: leafcutterElectricBlue,
color: white,
opacity: 0.8,
},
}}
>
{t("createVisualization")}
</Button>
</Link>
</Grid>
<Grid
container
direction="row"
wrap="wrap"
spacing={3}
justifyContent="space-between"
>
{visualizations.length === 0 ? (
<Grid
container
sx={{ height: 300, width: "100%", pt: 10 }}
justifyContent="center"
>
<Grid item sx={{ ...h4, width: 450, textAlign: "center" }}>
<ReactMarkdown>{t("noSavedVisualizations")}</ReactMarkdown>
</Grid>
</Grid>
) : null}
{visualizations.map((visualization: any, index: number) => (
<VisualizationCard
id={visualization.id}
key={index}
title={visualization.title}
description={visualization.description}
url={visualization.url}
/>
))}
</Grid>
<WelcomeDialog />
</>
);
};

75
apps/leafcutter/app/_components/InternalLayout.tsx Normal file
View file

@ -0,0 +1,75 @@
"use client";
import { FC, PropsWithChildren } from "react";
import getConfig from "next/config";
import { Grid, Container } from "@mui/material";
import CookieConsent from "react-cookie-consent";
import { useCookies } from "react-cookie";
import { TopNav } from "./TopNav";
import { Sidebar } from "./Sidebar";
import { GettingStartedDialog } from "./GettingStartedDialog";
import { useAppContext } from "./AppProvider";
// import { Footer } from "./Footer";
type LayoutProps = PropsWithChildren<{
embedded?: boolean;
}>;
export const InternalLayout: FC<LayoutProps> = ({
embedded = false,
children,
}: any) => {
const [cookies, setCookie] = useCookies(["cookieConsent"]);
const consentGranted = cookies.cookieConsent === "true";
const {
colors: {
white,
almostBlack,
leafcutterElectricBlue,
cdrLinkOrange,
helpYellow,
},
} = useAppContext();
return (
<>
<Grid container direction="column">
{!embedded && (
<Grid item>
<TopNav />
</Grid>
)}
{!embedded && <Sidebar open />}
<Grid
item
sx={{ mt: embedded ? 0 : "100px", ml: embedded ? 0 : "310px" }}
>
<Container sx={{ padding: 2 }}>{children}</Container>
</Grid>
</Grid>
{!consentGranted ? (
<CookieConsent
style={{
zIndex: 1500,
backgroundColor: helpYellow,
color: almostBlack,
borderTop: `1px solid ${leafcutterElectricBlue}`,
}}
onAccept={() => setCookie("cookieConsent", "true", { path: "/" })}
buttonStyle={{
borderRadius: 500,
backgroundColor: cdrLinkOrange,
color: white,
textTransform: "uppercase",
padding: "10px 20px",
fontWeight: "bold",
fontSize: 14,
}}
>
Leafcutter uses cookies for core funtionality.
</CookieConsent>
) : null}
<GettingStartedDialog />
</>
);
};

67
apps/leafcutter/app/_components/LanguageSelect.tsx Normal file
View file

@ -0,0 +1,67 @@
"use client";
import { useRouter } from "next/router";
import { IconButton, Menu, MenuItem, Box } from "@mui/material";
import { KeyboardArrowDown as KeyboardArrowDownIcon } from "@mui/icons-material";
import {
usePopupState,
bindTrigger,
bindMenu,
} from "material-ui-popup-state/hooks";
import { useAppContext } from "./AppProvider";
// import { Tooltip } from "./Tooltip";
export const LanguageSelect = () => {
const {
colors: { white, leafcutterElectricBlue },
} = useAppContext();
const router = useRouter();
const locales: any = { en: "English", fr: "Français" };
const popupState = usePopupState({ variant: "popover", popupId: "language" });
return (
<Box>
<IconButton
{...bindTrigger(popupState)}
sx={{
fontSize: 14,
borderRadius: 500,
color: white,
backgroundColor: leafcutterElectricBlue,
fontWeight: "bold",
textTransform: "uppercase",
pl: 4,
pr: 3,
":hover": {
backgroundColor: leafcutterElectricBlue,
opacity: 0.8,
},
}}
>
{locales[router.locale as any] ?? locales.en}
<KeyboardArrowDownIcon />
</IconButton>
<Menu {...bindMenu(popupState)}>
{Object.keys(locales).map((locale) => (
<MenuItem
key={locale}
onClick={() => {
router.push(router.route, router.route, { locale });
popupState.close();
}}
>
<Box sx={{ width: 130 }}>{locales[locale]}</Box>
</MenuItem>
))}
</Menu>
</Box>
);
};
/* <Tooltip
title={t("languageTooltipTitle")}
description={t("languageTooltipDescription")}
color="#fff"
backgroundColor="#a5a6f6"
placement="top"
> </Tooltip> */

24
apps/leafcutter/app/_components/LiveDataViewer.tsx Normal file
View file

@ -0,0 +1,24 @@
"use client";
import { FC, useEffect, useState } from "react";
import { useAppContext } from "./AppProvider";
import { RawDataViewer } from "./RawDataViewer";
export const LiveDataViewer: FC = () => {
const { query, setFoundCount } = useAppContext();
const [rows, setRows] = useState<any[]>([]);
const searchQuery = encodeURI(JSON.stringify(query));
useEffect(() => {
const fetchData = async () => {
const result = await fetch(
`/api/visualizations/query?searchQuery=${searchQuery}`
);
const json = await result.json();
setRows(json);
setFoundCount(json?.length ?? 0);
};
fetchData();
}, [searchQuery, setFoundCount]);
return <RawDataViewer rows={rows} height={350} />;
};

150
apps/leafcutter/app/_components/MetricSelectCard.tsx Normal file
View file

@ -0,0 +1,150 @@
"use client";
import { FC, useState } from "react";
import { Card, Grid } from "@mui/material";
import {
PrivacyTip as PrivacyTipIcon,
PhoneIphone as PhoneIphoneIcon,
Map as MapIcon,
Group as GroupIcon,
DateRange as DateRangeIcon,
Public as PublicIcon,
} from "@mui/icons-material";
import { VisualizationDetailDialog } from "./VisualizationDetailDialog";
import { useAppContext } from "./AppProvider";
interface MetricSelectCardProps {
visualizationID: string;
metricType: string;
title: string;
description: string;
enabled: boolean;
}
export const MetricSelectCard: FC<MetricSelectCardProps> = ({
visualizationID,
metricType,
title,
description,
enabled,
}) => {
const [open, setOpen] = useState(false);
const closeDialog = () => setOpen(false);
const [dialogParams, setDialogParams] = useState<any>({});
const {
typography: { small },
colors: { white, leafcutterElectricBlue, cdrLinkOrange },
query,
} = useAppContext();
/* const images = {
actor: PrivacyTipIcon,
incidenttype: PrivacyTipIcon,
channel: PrivacyTipIcon,
date: DateRangeIcon,
targetedgroup: GroupIcon,
impactedtechnology: PhoneIphoneIcon,
location: MapIcon,
}; */
const createAndOpen = async () => {
const createParams = {
visualizationID,
title,
description,
query,
};
const result: any = await fetch(`/api/visualizations/create`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(createParams),
});
const { id } = await result.json();
const params = {
id,
title: createParams.title,
description: createParams.description,
url: `/app/visualize?security_tenant=private#/edit/${id}?embed=true`,
};
setDialogParams(params);
setOpen(true);
};
return (
<>
<Card
sx={{
height: "100px",
backgroundColor: enabled ? leafcutterElectricBlue : white,
borderRadius: "10px",
padding: "10px",
opacity: enabled ? 1 : 0.5,
cursor: enabled ? "pointer" : "default",
"&:hover": {
backgroundColor: enabled ? cdrLinkOrange : white,
},
}}
elevation={enabled ? 2 : 0}
onClick={createAndOpen}
>
<Grid
direction="column"
container
justifyContent="space-around"
alignContent="center"
alignItems="center"
wrap="nowrap"
sx={{ height: "100%" }}
spacing={0}
>
<Grid
item
sx={{
...small,
textAlign: "center",
color: enabled ? white : leafcutterElectricBlue,
}}
>
{title}
</Grid>
<Grid item>
{metricType === "impactedtechnology" && (
<PhoneIphoneIcon fontSize="large" sx={{ color: "white" }} />
)}
{metricType === "region" && (
<PublicIcon fontSize="large" sx={{ color: "white" }} />
)}
{metricType === "continent" && (
<PublicIcon fontSize="large" sx={{ color: "white" }} />
)}
{metricType === "country" && (
<MapIcon fontSize="large" sx={{ color: "white" }} />
)}
{metricType === "targetedgroup" && (
<GroupIcon fontSize="large" sx={{ color: "white" }} />
)}
{metricType === "incidenttype" && (
<PrivacyTipIcon fontSize="large" sx={{ color: "white" }} />
)}
{metricType === "date" && (
<DateRangeIcon fontSize="large" sx={{ color: "white" }} />
)}
</Grid>
</Grid>
</Card>
{open ? (
<VisualizationDetailDialog
id={dialogParams.id}
title={dialogParams.title}
description={dialogParams.description}
url={dialogParams.url}
closeDialog={closeDialog}
editing
/>
) : null}
</>
);
};

47
apps/leafcutter/app/_components/MultiProvider.tsx Normal file
View file

@ -0,0 +1,47 @@
/* eslint-disable react/jsx-props-no-spreading */
import { FC, PropsWithChildren } from "react";
import { SessionProvider } from "next-auth/react";
import { CssBaseline } from "@mui/material";
import { CookiesProvider } from "react-cookie";
import { I18n } from "react-polyglot";
import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
("use client");
import { LocalizationProvider } from "@mui/x-date-pickers-pro";
import { AppProvider } from "@/app/_components/AppProvider";
import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
import en from "locales/en.json";
import fr from "locales/fr.json";
import "@fontsource/poppins/400.css";
import "@fontsource/poppins/700.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/700.css";
import "@fontsource/playfair-display/900.css";
import "styles/global.css";
import { LicenseInfo } from "@mui/x-data-grid-pro";
LicenseInfo.setLicenseKey(process.env.MUI_LICENSE_KEY ?? "");
const messages: any = { en, fr };
export const MultiProvider: FC<PropsWithChildren> = ({ children }: any) => {
// const { locale = "en" } = useRouter();
const locale = "en";
return (
<NextAppDirEmotionCacheProvider options={{ key: "css" }}>
<SessionProvider>
<CookiesProvider>
<CssBaseline />
<AppProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<I18n locale={locale} messages={messages[locale]}>
{children}
</I18n>
</LocalizationProvider>
</AppProvider>
</CookiesProvider>
</SessionProvider>
</NextAppDirEmotionCacheProvider>
);
};

44
apps/leafcutter/app/_components/OpenSearchWrapper.tsx Normal file
View file

@ -0,0 +1,44 @@
"use client";
import { FC } from "react";
import Iframe from "react-iframe";
import { Box } from "@mui/material";
interface OpenSearchWrapperProps {
url: string;
marginTop: string;
}
export const OpenSearchWrapper: FC<OpenSearchWrapperProps> = ({
url,
marginTop,
}) => (
<Box sx={{ position: "relative", marginTop: "-100px" }}>
<Box
sx={{
width: "100%",
height: "100px",
marginTop: "-20px",
backgroundColor: "white",
zIndex: 100,
position: "relative",
}}
/>
<Box
sx={{
marginTop,
zIndex: 1,
position: "relative",
height: "100vh",
}}
>
<Iframe
id="opensearch"
url={`${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`}
width="100%"
height="100%"
frameBorder={0}
/>
</Box>
</Box>
);

40
apps/leafcutter/app/_components/PageHeader.tsx Normal file
View file

@ -0,0 +1,40 @@
"use client";
/* eslint-disable react/require-default-props */
import { FC, PropsWithChildren } from "react";
import { Box } from "@mui/material";
import { useAppContext } from "./AppProvider";
type PageHeaderProps = PropsWithChildren<{
backgroundColor: string;
sx?: any;
}>;
export const PageHeader: FC<PageHeaderProps> = ({
backgroundColor,
sx = {},
children,
}: any) => {
const {
colors: { white },
} = useAppContext();
return (
<Box
sx={{
width: "100%",
backgroundColor,
color: white,
p: 3,
borderRadius: "10px",
mb: "22px",
minHeight: "100px",
zIndex: 1000,
position: "relative",
...sx,
}}
>
{children}
</Box>
);
};

251
apps/leafcutter/app/_components/QueryBuilder.tsx Normal file
View file

@ -0,0 +1,251 @@
"use client";
import { FC, useState } from "react";
import {
Box,
Grid,
Dialog,
DialogActions,
Button,
DialogContent,
} from "@mui/material";
import {
PrivacyTip as PrivacyTipIcon,
DateRange as DateRangeIcon,
PhoneIphone as PhoneIphoneIcon,
Map as MapIcon,
Group as GroupIcon,
} from "@mui/icons-material";
import { useTranslate } from "react-polyglot";
import taxonomy from "app/_config/taxonomy.json";
import { QueryBuilderSection } from "./QueryBuilderSection";
import { QueryListSelector } from "./QueryListSelector";
import { QueryDateRangeSelector } from "./QueryDateRangeSelector";
import { useAppContext } from "./AppProvider";
import { Tooltip } from "./Tooltip";
interface QueryBuilderProps {}
export const QueryBuilder: FC<QueryBuilderProps> = () => {
const t = useTranslate();
const [dialogOpen, setDialogOpen] = useState(false);
const {
typography: { p },
colors: { leafcutterElectricBlue, mediumGray, almostBlack },
} = useAppContext();
const openAdvancedOptions = () => {
setDialogOpen(false);
window.open(`/app/visualize`, "_ blank");
};
return (
<Box sx={{ mb: 6 }}>
<Grid container direction="row" spacing={2}>
<Tooltip
title={t("categoriesCardTitle")}
description={t("categoriesCardDescription")}
tooltipID="categories"
placement="left"
previousURL="/create?tooltip=searchCreate"
nextURL="/create?tooltip=dateRange"
>
<Box sx={{ width: 0 }} />
</Tooltip>
<QueryBuilderSection
width={4}
name={t("incidentType")}
keyName="incidentType"
Image={PrivacyTipIcon}
showQueryType
tooltipTitle={t("incidentTypeCardTitle")}
tooltipDescription={t("incidentTypeCardDescription")}
>
<Grid container>
<QueryListSelector
title={t("type")}
keyName="incidentType"
values={taxonomy.incidentType}
width={12}
/>
</Grid>
</QueryBuilderSection>
<Tooltip
title={t("dateRangeCardTitle")}
description={t("dateRangeCardDescription")}
tooltipID="dateRange"
placement="top"
previousURL="/create?tooltip=categories"
nextURL="/create?tooltip=subcategories"
>
<Box sx={{ width: 0 }} />
</Tooltip>
<QueryBuilderSection
width={4}
name={t("date")}
keyName="date"
Image={DateRangeIcon}
tooltipTitle={t("dateRangeCardTitle")}
tooltipDescription={t("dateRangeCardDescription")}
>
<QueryDateRangeSelector />
</QueryBuilderSection>
<QueryBuilderSection
width={4}
name={t("targetedGroup")}
keyName="targetedGroup"
Image={GroupIcon}
showQueryType
tooltipTitle={t("targetedGroupCardTitle")}
tooltipDescription={t("targetedGroupCardDescription")}
>
<Grid container>
<QueryListSelector
title={t("group")}
keyName="targetedGroup"
values={taxonomy.targetedGroup}
width={12}
/>
</Grid>
</QueryBuilderSection>
<Tooltip
title={t("subcategoriesCardTitle")}
description={t("subcategoriesCardDescription")}
tooltipID="subcategories"
placement="top"
previousURL="/create?tooltip=dateRange"
nextURL="/create?tooltip=advancedOptions"
>
<Box sx={{ width: 0 }} />
</Tooltip>
<QueryBuilderSection
width={12}
name={t("impactedTechnology")}
keyName="impactedTechnology"
Image={PhoneIphoneIcon}
showQueryType
tooltipTitle={t("impactedTechnologyCardTitle")}
tooltipDescription={t("impactedTechnologyCardDescription")}
>
<Grid container spacing={2}>
<QueryListSelector
title={t("platform")}
keyName="platform"
values={taxonomy.platform}
width={3}
/>
<QueryListSelector
title={t("device")}
keyName="device"
values={taxonomy.device}
width={3}
/>
<QueryListSelector
title={t("service")}
keyName="service"
values={taxonomy.service}
width={3}
/>
<QueryListSelector
title={t("maker")}
keyName="maker"
values={taxonomy.maker}
width={3}
/>
</Grid>
</QueryBuilderSection>
<QueryBuilderSection
width={12}
name={t("region")}
keyName="subregion"
Image={MapIcon}
showQueryType={false}
tooltipTitle={t("regionCardTitle")}
tooltipDescription={t("regionCardDescription")}
>
<Grid container spacing={2}>
<QueryListSelector
title={t("continent")}
keyName="continent"
values={taxonomy.continent}
width={4}
/>
<QueryListSelector
title={t("country")}
keyName="country"
values={taxonomy.country}
width={4}
/>
<QueryListSelector
title={t("subregion")}
keyName="subregion"
values={taxonomy.subregion}
width={4}
/>
</Grid>
</QueryBuilderSection>
<Grid item xs={12}>
<Tooltip
title={t("advancedOptionsCardTitle")}
description={t("advancedOptionsCardDescription")}
tooltipID="advancedOptions"
placement="top"
previousURL="/create?tooltip=subcategories"
nextURL="/create?tooltip=queryResults"
>
<Button
sx={{
...p,
color: leafcutterElectricBlue,
textDecoration: "underline",
textTransform: "none",
fontWeight: "bold",
}}
onClick={() => setDialogOpen(true)}
>
{`+ ${t("advancedOptions")}`}
</Button>
</Tooltip>
</Grid>
</Grid>
<Dialog open={dialogOpen}>
<DialogContent sx={{ maxWidth: 350 }}>
{t("fullInterfaceWillOpen")}
</DialogContent>
<DialogActions>
<Grid
container
direction="row"
justifyContent="space-between"
wrap="nowrap"
sx={{ pl: 2, pr: 2, pt: 1, pb: 1 }}
>
<Grid item>
<Button
sx={{
backgroundColor: mediumGray,
color: almostBlack,
}}
variant="contained"
size="small"
onClick={() => setDialogOpen(false)}
>
{t("cancel")}
</Button>
</Grid>
<Grid item>
<Button
sx={{ backgroundColor: leafcutterElectricBlue }}
variant="contained"
size="small"
onClick={openAdvancedOptions}
>
{t("open")}
</Button>
</Grid>
</Grid>
</DialogActions>
</Dialog>
</Box>
);
};

230
apps/leafcutter/app/_components/QueryBuilderSection.tsx Normal file
View file

@ -0,0 +1,230 @@
"use client";
import { FC, PropsWithChildren, useState } from "react";
import {
Box,
Grid,
Accordion,
AccordionSummary,
AccordionDetails,
Button,
ButtonGroup,
IconButton,
Tooltip as MUITooltip,
} from "@mui/material";
import { useTranslate } from "react-polyglot";
import {
ExpandMore as ExpandMoreIcon,
Help as HelpIcon,
} from "@mui/icons-material";
import { useAppContext } from "./AppProvider";
interface QueryBuilderSectionProps {
name: string;
keyName: string;
children: any;
Image: any;
width: number;
// eslint-disable-next-line react/require-default-props
showQueryType?: boolean;
tooltipTitle: string;
tooltipDescription: string;
}
type TooltipProps = PropsWithChildren<{
title: string;
description: string;
children: any;
open: boolean;
}>;
const Tooltip: FC<TooltipProps> = ({ title, description, children, open }) => {
const {
colors: { white, leafcutterElectricBlue, almostBlack },
typography: { h5, small },
} = useAppContext();
return (
<MUITooltip
open={open}
title={
<Box sx={{ width: 300, p: 2, pt: 1 }}>
<Grid container direction="column">
<Grid
item
sx={{
...h5,
textTransform: "none",
textAlign: "left",
fontWeight: 700,
ml: 0,
color: leafcutterElectricBlue,
}}
>
{title}
</Grid>
<Grid item sx={{ ...small, color: almostBlack }}>
{description}
</Grid>
</Grid>
</Box>
}
arrow
placement="top"
componentsProps={{
tooltip: {
sx: {
backgroundColor: white,
boxShadow: "0px 6px 8px rgba(0,0,0,0.5)",
},
},
arrow: {
sx: {
color: "white",
fontSize: "22px",
},
},
}}
>
{children}
</MUITooltip>
);
};
export const QueryBuilderSection: FC<QueryBuilderSectionProps> = ({
name,
keyName,
children,
Image,
width,
showQueryType = false,
tooltipTitle,
tooltipDescription,
}) => {
const t = useTranslate();
const [queryType, setQueryType] = useState("include");
const [showTooltip, setShowTooltip] = useState(false);
const {
colors: { white, leafcutterElectricBlue, warningPink, almostBlack },
typography: { h6, small },
updateQueryType,
} = useAppContext();
const updateType = (type: string) => {
setQueryType(type);
updateQueryType({
[keyName]: { queryType: type },
});
};
const minHeight = "42px";
const maxHeight = "42px";
return (
<Grid item xs={width}>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
sx={{
backgroundColor: leafcutterElectricBlue,
height: "14px",
minHeight,
maxHeight,
"&.Mui-expanded": {
minHeight,
maxHeight,
},
}}
>
<Grid container direction="row" alignItems="center">
<Grid item>
<Image
sx={{ color: white, fontSize: 24, mr: "8px", mt: "2px" }}
alt=""
/>
</Grid>
<Grid item>
<Box sx={{ ...h6, color: white, fontWeight: "bold", mt: "-2px" }}>
{name}
</Box>
</Grid>
<Grid item>
<Tooltip
open={showTooltip}
title={tooltipTitle}
description={tooltipDescription}
>
<IconButton
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
>
<HelpIcon
sx={{ color: white, width: "14px", mt: "-1px", ml: "-3px" }}
/>
</IconButton>
</Tooltip>
</Grid>
</Grid>
</AccordionSummary>
<AccordionDetails>
{showQueryType ? (
<Grid
container
direction="row"
spacing={1}
sx={{ mt: 0, mb: 2 }}
justifyContent="center"
>
<Grid item sx={{ mt: "-6px" }}>
<ButtonGroup>
<Button
variant="contained"
size="small"
sx={{
fontSize: 10,
height: 20,
color: queryType === "include" ? white : almostBlack,
backgroundColor:
queryType === "include"
? leafcutterElectricBlue
: white,
"&:hover": {
color: white,
backgroundColor: leafcutterElectricBlue,
},
}}
onClick={() => updateType("include")}
>
{t("include")}
</Button>
<Button
variant="contained"
color="primary"
size="small"
sx={{
fontSize: 10,
height: 20,
color: queryType === "exclude" ? white : almostBlack,
backgroundColor:
queryType === "exclude" ? warningPink : white,
"&:hover": {
color: white,
backgroundColor: warningPink,
},
}}
onClick={() => updateType("exclude")}
>
{t("exclude")}
</Button>
</ButtonGroup>
</Grid>
<Grid item>
<Box sx={{ ...small, mt: "0px" }}>these items:</Box>
</Grid>
</Grid>
) : null}
<Box>{children}</Box>
</AccordionDetails>
</Accordion>
</Grid>
);
};

118
apps/leafcutter/app/_components/QueryDateRangeSelector.tsx Normal file
View file

@ -0,0 +1,118 @@
"use client";
import { FC, useState, useEffect } from "react";
import { Box, Grid, TextField, Select, MenuItem } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers-pro";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
interface QueryDateRangeSelectorProps {}
export const QueryDateRangeSelector: FC<QueryDateRangeSelectorProps> = () => {
const t = useTranslate();
const [relativeDate, setRelativeDate] = useState("");
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const { updateQuery, query } = useAppContext();
useEffect(() => {
setStartDate(query.startDate.values[0] ?? null);
setEndDate(query.endDate.values[0] ?? null);
setRelativeDate(query.relativeDate.values[0] ?? "");
}, [query, setStartDate, setEndDate, setRelativeDate]);
return (
<Box sx={{ height: 305, width: "100%", pt: 2 }}>
<Grid container direction="column">
<Grid item xs={12} sx={{ mb: 2 }}>
<Select
fullWidth
size="small"
placeholder={t("relativeDate")}
value={relativeDate}
onChange={(event: any) => {
setStartDate(null);
setEndDate(null);
setRelativeDate(event.target.value);
updateQuery({
startDate: { values: [] },
});
updateQuery({
endDate: { values: [] },
});
updateQuery({
relativeDate: { values: [event.target.value] },
});
}}
>
<MenuItem value={7}>{t("last7Days")}</MenuItem>
<MenuItem value={30}>{t("last30Days")}</MenuItem>
<MenuItem value={90}>{t("last3Months")}</MenuItem>
<MenuItem value={180}>{t("last6Months")}</MenuItem>
<MenuItem value={365}>{t("lastYear")}</MenuItem>
<MenuItem value={730}>{t("last2Years")}</MenuItem>
</Select>
</Grid>
<Grid item sx={{ textAlign: "center", mb: 2 }}>
– or –
</Grid>
<Grid item xs={12}>
<DatePicker
label={t("startDate")}
value={startDate}
onChange={(date) => {
setStartDate(date);
updateQuery({
startDate: { values: [date] },
});
}}
// @ts-ignore
renderInput={(params) => (
<TextField
{...params}
sx={{
width: "100%",
color: "black",
"& .MuiOutlinedInput-root": {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
}}
size="small"
/>
)}
/>
</Grid>
<Grid item xs={12}>
<DatePicker
label={t("endDate")}
value={endDate}
onChange={(date) => {
setEndDate(date);
updateQuery({
endDate: { values: [date] },
});
}}
// @ts-ignore
renderInput={(params) => (
<TextField
{...params}
sx={{
backgroundColor: "white",
mt: "-1px",
width: "100%",
color: "black",
"& .MuiOutlinedInput-root": {
borderTop: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
}}
size="small"
/>
)}
/>
</Grid>
</Grid>
</Box>
);
};

94
apps/leafcutter/app/_components/QueryListSelector.tsx Normal file
View file

@ -0,0 +1,94 @@
"use client";
import { FC, useState, useEffect } from "react";
import { Box, Grid, Tooltip } from "@mui/material";
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
import { useAppContext } from "./AppProvider";
interface QueryListSelectorProps {
title: string;
keyName: string;
values: any;
width: number;
}
export const QueryListSelector: FC<QueryListSelectorProps> = ({
title,
keyName,
values,
width,
}) => {
const [selectionModel, setSelectionModel] = useState([] as any[]);
const {
colors: { leafcutterLightBlue, pink, leafcutterElectricBlue, warningPink },
typography: { small },
query,
updateQuery,
} = useAppContext();
const isExclude = query[keyName]?.queryType === "exclude";
const columns: GridColDef[] = [
{
field: "value",
renderHeader: () => (
<Box sx={{ ...small, fontWeight: "bold" }}>{title}</Box>
),
renderCell: ({ value, row }) => (
<Tooltip title={row.description}>
<Box sx={{ width: "100%" }}>{value}</Box>
</Tooltip>
),
editable: false,
flex: 1,
},
];
const rows = Object.keys(values).map((k) => ({
id: k,
value: values[k].display,
description: values[k].description,
category: values[k].category,
}));
useEffect(() => {
setSelectionModel(query[keyName].values);
}, [query, keyName, setSelectionModel]);
return (
<Grid item xs={width}>
<Box style={{ height: 280, width: "100%" }}>
<Grid container direction="column" spacing={2}>
<Grid item>
<DataGridPro
sx={{
height: 260,
"& .MuiCheckbox-root": {
color: isExclude ? warningPink : leafcutterElectricBlue,
},
"& .Mui-selected": {
backgroundColor: `${
isExclude ? pink : leafcutterLightBlue
} !important`,
},
}}
rows={rows}
columns={columns}
density="compact"
pageSizeOptions={[100]}
checkboxSelection
disableRowSelectionOnClick
hideFooter
disableColumnMenu
scrollbarSize={10}
onRowSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
updateQuery({
[keyName]: { values: newSelectionModel },
});
}}
rowSelectionModel={selectionModel}
/>
</Grid>
</Grid>
</Box>
</Grid>
);
};

126
apps/leafcutter/app/_components/QueryText.tsx Normal file
View file

@ -0,0 +1,126 @@
"use client";
import { FC, useState, useEffect } from "react";
import { Box, Grid } from "@mui/material";
import { useTranslate } from "react-polyglot";
import taxonomy from "app/_config/taxonomy.json";
import { colors } from "styles/theme";
import { useAppContext } from "./AppProvider";
export const QueryText: FC = () => {
const t = useTranslate();
const {
typography: { h6 },
query: q,
} = useAppContext();
const displayNames: any = {
incidentType: t("incidentType"),
startDate: t("startDate"),
endDate: t("endDate"),
relativeDate: t("relativeDate"),
targetedGroup: t("targetedGroup"),
platform: t("platform"),
device: t("device"),
service: t("service"),
maker: t("maker"),
country: t("country"),
subregion: t("subregion"),
continent: t("continent"),
};
const createClause = (query: any, key: string) => {
const { values, queryType } = query[key];
const color =
queryType === "include"
? colors.leafcutterElectricBlue
: colors.warningPink;
if (values.length > 0) {
return `where <span style="color: ${color};"><strong>${
displayNames[key]
}</strong> ${
queryType === "include" ? ` ${t("is")} ` : ` ${t("isNot")} `
} ${values
.map(
// @ts-expect-error
(value: string) => `<em>${taxonomy[key]?.[value]?.display ?? ""}</em>`
)
.join(` ${t("or")} `)}</span>`;
}
return null;
};
const createDateClause = (query: any, key: string) => {
const { values } = query[key];
const color = colors.leafcutterElectricBlue;
if (values.length > 0) {
const range = key === "startDate" ? t("onOrAfter") : t("onOrBefore");
return `${t("where")} <span style="color: ${color};"><strong>${
displayNames[key]
}</strong> is ${range} <em>${values[0]?.toLocaleDateString()}</em></span>`;
}
return null;
};
const createRelativeDateClause = (query: any, key: string) => {
const { values } = query[key];
const color = colors.leafcutterElectricBlue;
if (query[key].values.length > 0) {
const range = t("onOrAfter");
return `${t("where")} <span style="color: ${color};"><strong>${
displayNames[key]
}</strong> is ${range} <em>${values[0]} days ago</em></span>`;
}
return null;
};
const [queryText, setQueryText] = useState(t("findAllIncidents"));
useEffect(() => {
const generateQueryText = (query: any) => {
const incidentClause = createClause(query, "incidentType");
const startDateClause = createDateClause(query, "startDate");
const endDateClause = createDateClause(query, "endDate");
const relativeDateClause = createRelativeDateClause(
query,
"relativeDate"
);
const targetedGroupClause = createClause(query, "targetedGroup");
const platformClause = createClause(query, "platform");
const deviceClause = createClause(query, "device");
const serviceClause = createClause(query, "service");
const makerClause = createClause(query, "maker");
const countryClause = createClause(query, "country");
const subregionClause = createClause(query, "subregion");
const continentClause = createClause(query, "continent");
const joinedClauses = [
incidentClause,
startDateClause,
endDateClause,
relativeDateClause,
targetedGroupClause,
platformClause,
deviceClause,
serviceClause,
makerClause,
countryClause,
subregionClause,
continentClause,
]
.filter((clause) => clause !== null)
.join(" and ");
return `${t("findAllIncidents")} ${joinedClauses}`;
};
const text = generateQueryText(q);
setQueryText(text);
}, [q]);
return (
<Grid container direction="column">
<Grid item>
<Box sx={h6} dangerouslySetInnerHTML={{ __html: queryText }} />
</Grid>
</Grid>
);
};

80
apps/leafcutter/app/_components/Question.tsx Normal file
View file

@ -0,0 +1,80 @@
"use client";
import { FC, useState } from "react";
import ReactMarkdown from "react-markdown";
import {
Grid,
Box,
Accordion,
AccordionSummary,
AccordionDetails,
} from "@mui/material";
import {
ChevronRight as ChevronRightIcon,
ExpandMore as ExpandMoreIcon,
Circle as CircleIcon,
} from "@mui/icons-material";
import { useAppContext } from "./AppProvider";
interface QuestionProps {
question: string;
answer: string;
}
export const Question: FC<QuestionProps> = ({ question, answer }) => {
const [expanded, setExpanded] = useState(false);
const {
colors: { lavender, darkLavender },
typography: { h5, p },
} = useAppContext();
return (
<Accordion
expanded={expanded}
onChange={() => setExpanded(!expanded)}
elevation={0}
sx={{ "::before": { display: "none" } }}
>
<AccordionSummary>
<Grid
container
direction="row"
justifyContent="space-between"
sx={{ maxWidth: 500 }}
>
<Box component="h5" sx={h5}>
<CircleIcon
sx={{
fontSize: 14,
color: expanded ? darkLavender : lavender,
mr: 1,
mb: "-2px",
}}
/>
{question}
</Box>
{expanded ? (
<ExpandMoreIcon
htmlColor={lavender}
fontSize="medium"
sx={{ mt: "2px" }}
/>
) : (
<ChevronRightIcon
htmlColor={lavender}
fontSize="medium"
sx={{ mt: "4px" }}
/>
)}
</Grid>
</AccordionSummary>
<AccordionDetails sx={{ border: 0 }}>
<Box
sx={{ ...p, p: 2, border: `1px solid ${lavender}`, borderRadius: 3 }}
>
<ReactMarkdown>{answer}</ReactMarkdown>
</Box>
</AccordionDetails>
</Accordion>
);
};

86
apps/leafcutter/app/_components/RawDataViewer.tsx Normal file
View file

@ -0,0 +1,86 @@
"use client";
import { FC } from "react";
import { Box, Grid } from "@mui/material";
import { DataGridPro } from "@mui/x-data-grid-pro";
import { useTranslate } from "react-polyglot";
interface RawDataViewerProps {
rows: any[];
height: number;
}
export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
const t = useTranslate();
const columns = [
{
field: "date",
headerName: t("date"),
editable: false,
flex: 0.7,
valueFormatter: ({ value }: any) => new Date(value).toLocaleDateString(),
},
{
field: "incident",
headerName: t("incident"),
editable: false,
flex: 1,
},
{
field: "technology",
headerName: t("technology"),
editable: false,
flex: 0.8,
},
{
field: "targeted_group",
headerName: t("targetedGroup"),
editable: false,
flex: 1.3,
},
{
field: "country",
headerName: t("country"),
editable: false,
flex: 1,
},
{
field: "region",
headerName: t("subregion"),
editable: false,
flex: 1,
},
{
field: "continent",
headerName: t("continent"),
editable: false,
flex: 1,
},
];
return (
<Grid item xs={12}>
<Box
sx={{ width: "100%", height }}
onClick={(e: any) => e.stopPropagation()}
>
<Grid container direction="column" spacing={2}>
<Grid item>
<DataGridPro
sx={{ width: "100%", height }}
rows={rows}
columns={columns}
density="compact"
pageSizeOptions={[100]}
disableRowSelectionOnClick
hideFooter
disableColumnMenu
scrollbarSize={10}
disableVirtualization
/>
</Grid>
</Grid>
</Box>
</Grid>
);
};

255
apps/leafcutter/app/_components/Sidebar.tsx Normal file
View file

@ -0,0 +1,255 @@
"use client";
import { FC } from "react";
import DashboardMenuIcon from "images/dashboard-menu.png";
import AboutMenuIcon from "images/about-menu.png";
import TrendsMenuIcon from "images/trends-menu.png";
import SearchCreateMenuIcon from "images/search-create-menu.png";
import FAQMenuIcon from "images/faq-menu.png";
import Image from "next/legacy/image";
import {
Box,
Grid,
Typography,
List,
ListItem,
ListItemIcon,
ListItemText,
Drawer,
} from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "@/app/_components/AppProvider";
import { Tooltip } from "@/app/_components/Tooltip";
// import { ArrowCircleRight as ArrowCircleRightIcon } from "@mui/icons-material";
const MenuItem = ({
name,
href,
selected,
icon,
iconSize,
}: // tooltipTitle,
// tooltipDescription,
{
name: string;
href: string;
selected: boolean;
icon: any;
iconSize: number;
// tooltipTitle: string;
// tooltipDescription: string;
}) => {
const {
colors: { leafcutterLightBlue, black },
} = useAppContext();
return (
<Link href={href} passHref>
<ListItem
button
sx={{
paddingLeft: "62px",
backgroundColor: selected ? leafcutterLightBlue : "transparent",
mt: "6px",
"& :hover": { backgroundColor: leafcutterLightBlue },
}}
>
<ListItemIcon
sx={{
color: `${black} !important`,
}}
>
<Box
sx={{
width: iconSize,
height: iconSize,
ml: `${(20 - iconSize) / 2}px`,
mr: `${(20 - iconSize) / 2}px`,
}}
>
<Image src={icon} alt="" />
</Box>
<ListItemText
primary={
<Typography
variant="body1"
style={{
color: "#000 !important",
fontSize: 14,
fontFamily: "Roboto",
fontWeight: 400,
marginLeft: 10,
marginTop: -3,
}}
>
{name}
</Typography>
}
/>
</ListItemIcon>
</ListItem>
</Link>
);
};
interface SidebarProps {
open: boolean;
}
export const Sidebar: FC<SidebarProps> = ({ open }) => {
const t = useTranslate();
const router = useRouter();
const section = router.pathname.split("/")[1];
const {
colors: { white }, // leafcutterElectricBlue, leafcutterLightBlue,
} = useAppContext();
// const [recentUpdates, setRecentUpdates] = useState([]);
/*
useEffect(() => {
const getRecentUpdates = async () => {
const result = await fetch(`/api/trends/recent`);
const json = await result.json();
setRecentUpdates(json);
};
getRecentUpdates();
}, []);
*/
return (
<Drawer
sx={{ width: 300, flexShrink: 0 }}
color="secondary"
variant="permanent"
anchor="left"
open={open}
PaperProps={{
sx: {
width: 300,
border: 0,
mt: "90px",
mb: "200px",
},
}}
>
<Grid
container
direction="column"
justifyContent="space-between"
wrap="nowrap"
sx={{ backgroundColor: white, height: "100%" }}
>
<Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
<Tooltip
title={t("dashboardNavigationCardTitle")}
description={t("dashboardNavigationCardDescription")}
tooltipID="navigation"
placement="right"
nextURL="/?tooltip=recentUpdates"
previousURL="/?tooltip=welcome"
>
<List component="nav">
<MenuItem
name={t("dashboardMenuItem")}
href="/"
icon={DashboardMenuIcon}
iconSize={20}
selected={section === ""}
/>
<MenuItem
name={t("searchAndCreateMenuItem")}
href="/create"
icon={SearchCreateMenuIcon}
iconSize={20}
selected={section === "create"}
/>
<MenuItem
name={t("trendsMenuItem")}
href="/trends"
icon={TrendsMenuIcon}
iconSize={13}
selected={section === "trends"}
/>
<MenuItem
name={t("faqMenuItem")}
href="/faq"
icon={FAQMenuIcon}
iconSize={20}
selected={section === "faq"}
/>
<MenuItem
name={t("aboutMenuItem")}
href="/about"
icon={AboutMenuIcon}
iconSize={20}
selected={section === "about"}
/>
</List>
</Tooltip>
</Grid>
{/*
<Tooltip
title={t("recentUpdatesCardTitle")}
description={t("recentUpdatesCardDescription")}
tooltipID="recentUpdates"
nextURL="/?tooltip=profile"
previousURL="/?tooltip=navigation"
placement="right"
>
<Grid
item
sx={{
overflow: "hidden",
backgroundColor: leafcutterLightBlue,
height: 350,
}}
>
<Typography
variant="body1"
sx={{
fontWeight: 700,
fontSize: 14,
backgroundColor: leafcutterElectricBlue,
color: white,
p: 2,
}}
>
{t("recentUpdatesTitle")}
</Typography>
{recentUpdates.map((trend, index) => (
<Link href={`/visualizations/${trend.id}`} passHref key={index}>
<Box
key={index}
sx={{
p: 2,
cursor: "pointer",
}}
>
<Typography
variant="body2"
sx={{ color: leafcutterElectricBlue, fontWeight: 700 }}
>
{trend.title}
</Typography>
<Typography
variant="body2"
sx={{ color: leafcutterElectricBlue }}
>
{trend.description}{" "}
<ArrowCircleRightIcon
sx={{ height: 16, width: 16, mb: "-4px" }}
/>
</Typography>
</Box>
</Link>
))}
</Grid>
</Tooltip> */}
</Grid>
</Drawer>
);
};

158
apps/leafcutter/app/_components/Tooltip.tsx Normal file
View file

@ -0,0 +1,158 @@
"use client";
/* eslint-disable react/require-default-props */
import { FC } from "react";
import { useRouter } from "next/router";
import {
Box,
Grid,
Tooltip as MUITooltip,
Button,
IconButton,
} from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
interface TooltipProps {
title: string;
description: string;
placement: any;
tooltipID: string;
nextURL?: string;
previousURL?: string;
children: any;
}
export const Tooltip: FC<TooltipProps> = ({
title,
description,
placement,
tooltipID,
children,
previousURL = null,
nextURL = null,
// eslint-disable-next-line arrow-body-style
}) => {
const t = useTranslate();
const {
typography: { p, small },
colors: { white, leafcutterElectricBlue, almostBlack },
} = useAppContext();
const router = useRouter();
const activeTooltip = router.query.tooltip?.toString();
const open = activeTooltip === tooltipID;
const showNavigation = true;
return (
<MUITooltip
open={open}
title={
<Grid container direction="column">
<Grid item container direction="row-reverse">
<Grid item>
<IconButton onClick={() => router.push(router.pathname)}>
<CloseIcon
sx={{
color: leafcutterElectricBlue,
fontSize: "14px",
mt: 1,
}}
/>
</IconButton>
</Grid>
</Grid>
<Grid item>
<Box sx={{ p: "12px", pt: 0, mb: "6px" }}>
<Box sx={{ ...p, fontWeight: "bold" }}>
<Grid container direction="row" alignItems="center">
<Grid item>{title}</Grid>
</Grid>
</Box>
<Box sx={{ ...small, mt: 1, color: almostBlack }}>
{description}
</Box>
</Box>
</Grid>
{showNavigation ? (
<Grid
item
container
direction="row"
justifyContent="space-between"
alignItems="center"
sx={{ p: "12px" }}
>
<Grid item>
{previousURL ? (
<Button
sx={{
...small,
borderRadius: 500,
border: `1px solid ${leafcutterElectricBlue}`,
p: "2px 8px",
color: leafcutterElectricBlue,
textTransform: "none",
}}
onClick={() => router.push(previousURL)}
>
{t("previous")}
</Button>
) : null}
</Grid>
<Grid item>
{nextURL ? (
<Button
sx={{
...small,
borderRadius: 500,
border: `1px solid ${leafcutterElectricBlue}`,
p: "2px 8px",
color: leafcutterElectricBlue,
textTransform: "none",
}}
onClick={() => router.push(nextURL)}
>
{t("next")}
</Button>
) : (
<Button
sx={{
...small,
borderRadius: 500,
border: `1px solid ${leafcutterElectricBlue}`,
p: "2px 8px",
color: leafcutterElectricBlue,
textTransform: "none",
}}
onClick={() => router.push(router.pathname)}
>
{t("done")}
</Button>
)}
</Grid>
</Grid>
) : null}
</Grid>
}
arrow
placement={placement}
sx={{ opacity: 0.9 }}
componentsProps={{
tooltip: {
sx: {
opacity: 1.0,
backgroundColor: white,
color: leafcutterElectricBlue,
boxShadow: "0px 6px 20px rgba(0,0,0,0.25)",
},
},
arrow: {
sx: { opacity: 1.0, fontSize: "22px", color: white },
},
}}
>
{children}
</MUITooltip>
);
};

120
apps/leafcutter/app/_components/TopNav.tsx Normal file
View file

@ -0,0 +1,120 @@
"use client";
import { FC } from "react";
import Link from "next/link";
import Image from "next/legacy/image";
import { AppBar, Grid, Box } from "@mui/material";
import { useTranslate } from "react-polyglot";
import LeafcutterLogo from "images/leafcutter-logo.png";
import { AccountButton } from "@/app/_components/AccountButton";
import { HelpButton } from "@/app/_components/HelpButton";
import { Tooltip } from "@/app/_components/Tooltip";
import { useAppContext } from "./AppProvider";
// import { LanguageSelect } from "./LanguageSelect";
export const TopNav: FC = () => {
const t = useTranslate();
const {
colors: { white, leafcutterElectricBlue, cdrLinkOrange },
typography: { h5, h6 },
} = useAppContext();
return (
<AppBar
position="fixed"
elevation={1}
sx={{
backgroundColor: white,
marginBottom: 180,
opacity: 0.95,
pt: 2,
pb: 2,
pr: 3,
pl: 6,
backdropFilter: "blur(10px)",
}}
>
<Grid
container
justifyContent="space-between"
alignItems="center"
alignContent="center"
direction="row"
wrap="nowrap"
spacing={4}
>
<Link href="/" passHref>
<Grid
item
container
direction="row"
justifyContent="flex-start"
spacing={1}
wrap="nowrap"
sx={{ cursor: "pointer" }}
>
<Grid item sx={{ pr: 1 }}>
<Image src={LeafcutterLogo} alt="" width={56} height={52} />
</Grid>
<Grid item container direction="column" alignContent="flex-start">
<Grid item>
<Box
sx={{
...h5,
color: leafcutterElectricBlue,
p: 0,
m: 0,
pt: 1,
textAlign: "left",
}}
>
Leafcutter
</Box>
</Grid>
<Grid item>
<Box
sx={{
...h6,
m: 0,
p: 0,
color: cdrLinkOrange,
textAlign: "left",
}}
>
A Project of Center for Digital Resilience
</Box>
</Grid>
</Grid>
</Grid>
</Link>
<Grid item>
<HelpButton />
</Grid>
{/* <Tooltip
title={t("languageOptionsCardTitle")}
description={t("languageOptionsCardDescription")}
emoji="✍️"
tooltipID="language"
placement="bottom"
>
<Grid item>
<LanguageSelect />
</Grid>
</Tooltip> */}
<Tooltip
title={t("profileSettingsCardTitle")}
description={t("profileSettingsCardDescription")}
tooltipID="profile"
placement="bottom"
previousURL="/?tooltip=recentUpdates"
nextURL="/create?tooltip=searchCreate"
>
<Grid item>
<AccountButton />
</Grid>
</Tooltip>
</Grid>
</AppBar>
);
};

373
apps/leafcutter/app/_components/VisualizationBuilder.tsx Normal file
View file

@ -0,0 +1,373 @@
"use client";
import { FC, useState, useEffect } from "react";
import {
Box,
Button,
Grid,
Popover,
Accordion,
AccordionSummary,
AccordionDetails,
Dialog,
Divider,
Paper,
MenuList,
MenuItem,
ListItemText,
ListItemIcon,
TextField,
} from "@mui/material";
import {
ExpandMore as ExpandMoreIcon,
AddCircleOutline as AddCircleOutlineIcon,
SavedSearch as SavedSearchIcon,
RemoveCircle as RemoveCircleIcon,
} from "@mui/icons-material";
import { useTranslate } from "react-polyglot";
import { QueryBuilder } from "@/app/_components/QueryBuilder";
import { QueryText } from "@/app/_components/QueryText";
import { LiveDataViewer } from "@/app/_components/LiveDataViewer";
import { Tooltip } from "@/app/_components/Tooltip";
import visualizationMap from "app/_config/visualizationMap.json";
import { VisualizationSelectCard } from "./VisualizationSelectCard";
import { MetricSelectCard } from "./MetricSelectCard";
import { useAppContext } from "./AppProvider";
interface VisualizationBuilderProps {
templates: any[];
}
export const VisualizationBuilder: FC<VisualizationBuilderProps> = ({
templates,
}) => {
const t = useTranslate();
const {
typography: { h4 },
colors: { white, leafcutterElectricBlue, cdrLinkOrange },
foundCount,
query,
replaceQuery,
clearQuery,
} = useAppContext();
const { visualizations } = visualizationMap;
const [selectedVisualizationType, setSelectedVisualizationType] = useState(
null as any
);
const toggleSelectedVisualizationType = (visualizationType: string) => {
if (visualizationType === selectedVisualizationType) {
setSelectedVisualizationType(null);
} else {
setSelectedVisualizationType(visualizationType);
}
};
const [dialogOpen, setDialogOpen] = useState(false);
const [savedSearches, setSavedSearches] = useState([]);
const [savedSearchName, setSavedSearchName] = useState("");
const [anchorEl, setAnchorEl] = useState(null);
const updateSearches = async () => {
const result = await fetch("/api/searches/list");
const existingSearches = await result.json();
setSavedSearches(existingSearches);
};
useEffect(() => {
updateSearches();
}, [setSavedSearches]);
const showSavedSearchPopup = (event: any) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setSavedSearchName("");
setAnchorEl(null);
};
const closeDialog = () => {
setDialogOpen(false);
};
const createSavedSearch = async (name: string, q: any) => {
await fetch("/api/searches/create", {
method: "POST",
body: JSON.stringify({ name, query: q }),
});
await updateSearches();
handleClose();
closeDialog();
};
const deleteSavedSearch = async (name: string) => {
await fetch("/api/searches/delete", {
method: "POST",
body: JSON.stringify({ name }),
});
await updateSearches();
closeDialog();
};
const updateSearch = (name: string) => {
handleClose();
closeDialog();
const found: any = savedSearches.find(
(search: any) => search.name === name
);
replaceQuery(found?.query);
};
const clearSearch = () => clearQuery();
const open = Boolean(anchorEl);
const elementID = open ? "simple-popover" : undefined;
const [queryExpanded, setQueryExpanded] = useState(true);
const [resultsExpanded, setResultsExpanded] = useState(false);
const minHeight = "42px";
const maxHeight = "42px";
const summaryStyles = {
backgroundColor: leafcutterElectricBlue,
height: "14px",
minHeight,
maxHeight,
"&.Mui-expanded": {
minHeight,
maxHeight,
},
};
const buttonStyles = {
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
color: `${white} !important`,
borderRadius: 999,
backgroundColor: leafcutterElectricBlue,
padding: "6px 30px",
margin: "20px 0px",
whiteSpace: "nowrap",
};
return (
<Box>
<Dialog open={dialogOpen}>
<Box sx={{ pt: 3, pl: 3, pr: 3 }}>
<Grid container direction="column" spacing={2}>
<Grid item>
<TextField
size="small"
placeholder="Saved search name"
sx={{ width: 400 }}
onChange={(e) => setSavedSearchName(e.target.value)}
/>
</Grid>
<Grid item container direction="row" justifyContent="space-between">
<Grid item>
<Button sx={buttonStyles} onClick={closeDialog}>
Cancel
</Button>
</Grid>
<Grid item>
<Button
sx={buttonStyles}
onClick={async () => {
await createSavedSearch(savedSearchName, query);
}}
>
Save
</Button>
</Grid>
</Grid>
</Grid>
</Box>
</Dialog>
<Grid
container
direction="row"
sx={{ mt: 4, mb: 2 }}
justifyContent="space-between"
>
<Grid item>
<Tooltip
title={t("searchAndCreateTitle")}
description={t("searchAndCreateDescription")}
tooltipID="searchCreate"
nextURL="/create?tooltip=categories"
previousURL="/?tooltip=profile"
placement="top"
>
<Box sx={h4}>Search Criteria</Box>
</Tooltip>
</Grid>
<Grid item>
<Button
aria-describedby={elementID}
variant="contained"
onClick={showSavedSearchPopup}
sx={{
backgroundColor: cdrLinkOrange,
textTransform: "none",
fontStyle: "italic",
fontWeight: "bold",
}}
>
<SavedSearchIcon sx={{ mr: 1 }} />
{t("savedSearch")}
</Button>
<Button
variant="contained"
onClick={clearSearch}
sx={{
backgroundColor: leafcutterElectricBlue,
textTransform: "none",
fontWeight: "bold",
ml: 3,
}}
>
{t("clear")}
</Button>
<Popover
id={elementID}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{ vertical: "top", horizontal: "right" }}
>
<Paper>
<MenuList>
<MenuItem
onClick={() => {
handleClose();
setDialogOpen(true);
}}
>
<ListItemIcon>
<AddCircleOutlineIcon fontSize="small" />
</ListItemIcon>
<ListItemText>{t("saveCurrentSearch")}</ListItemText>
</MenuItem>
<Divider />
{savedSearches.map((savedSearch: any) => (
<MenuItem
key={savedSearch.name}
onClick={() => updateSearch(savedSearch.name)}
>
<ListItemIcon />
<ListItemText>{savedSearch.name}</ListItemText>
<Box
onClick={() => deleteSavedSearch(savedSearch.name)}
sx={{ p: 0, m: 0, zIndex: 100 }}
>
<RemoveCircleIcon
sx={{
color: cdrLinkOrange,
p: 0,
m: 0,
":hover": { color: leafcutterElectricBlue },
}}
/>
</Box>
</MenuItem>
))}
</MenuList>
</Paper>
</Popover>
</Grid>
</Grid>
<QueryBuilder />
<Accordion
expanded={queryExpanded}
onClick={() => setQueryExpanded(!queryExpanded)}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
sx={summaryStyles}
>
<Box sx={{ ...h4, color: white }}>{t("query")}</Box>
</AccordionSummary>
<AccordionDetails sx={{ p: 2 }}>
<QueryText />
</AccordionDetails>
</Accordion>
<Accordion
sx={{ mt: 2 }}
expanded={resultsExpanded}
onClick={() => setResultsExpanded(!resultsExpanded)}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon sx={{ color: white, fontSize: 28 }} />}
sx={summaryStyles}
>
<Box sx={{ ...h4, color: white }}>{`${t(
"results"
)} (${foundCount})`}</Box>
</AccordionSummary>
<Tooltip
title={`${t("queryResultsCardTitle")}`}
description={t("queryResultsCardDescription")}
tooltipID="queryResults"
placement="top"
previousURL="/create?tooltip=advancedOptions"
nextURL="/create?tooltip=viewResults"
>
<AccordionDetails sx={{ p: 2, pb: 4 }}>
<LiveDataViewer />
</AccordionDetails>
</Tooltip>
</Accordion>
<Tooltip
title={t("viewResultsCardTitle")}
description={t("viewResultsCardDescription")}
tooltipID="viewResults"
placement="top"
previousURL="/create?tooltip=queryResults"
>
<Box sx={{ ...h4, mt: 6, mb: 2 }}>{t("selectVisualization")}:</Box>
</Tooltip>
<Box display="grid" gridTemplateColumns="repeat(5, 1fr)" gap={2}>
{Object.keys(visualizations).map((key: string) => (
<VisualizationSelectCard
key={key}
visualizationType={key}
// @ts-expect-error
title={visualizations[key].name}
enabled={
selectedVisualizationType === key ||
selectedVisualizationType === null
}
selected={selectedVisualizationType === key}
toggleSelected={toggleSelectedVisualizationType}
/>
))}
</Box>
<Box sx={{ ...h4, mt: 6, mb: 2 }}>{t("selectFieldVisualize")}:</Box>
<Box
display="grid"
gridTemplateColumns="repeat(5, 1fr)"
gap={2}
sx={{ minHeight: 200 }}
>
{templates
.filter(
(template: any) => template.type === selectedVisualizationType
)
.map((template: any) => {
const { id, type, title, description } = template;
const cleanTitle = title
.replace("Templated", "")
// @ts-expect-error
.replace(visualizations[type].name, "");
const metricType = cleanTitle.replace(/\s/g, "").toLowerCase();
return (
<MetricSelectCard
key={id}
visualizationID={id}
metricType={metricType}
title={`By ${cleanTitle}`}
description={description}
enabled
/>
);
})}
</Box>
</Box>
);
};

75
apps/leafcutter/app/_components/VisualizationCard.tsx Normal file
View file

@ -0,0 +1,75 @@
"use client";
import { FC, useState } from "react";
import { Grid, Card, Box } from "@mui/material";
import Iframe from "react-iframe";
import { useAppContext } from "@/app/_components/AppProvider";
import { VisualizationDetailDialog } from "@/app/_components/VisualizationDetailDialog";
interface VisualizationCardProps {
id: string;
title: string;
description: string;
url: string;
}
export const VisualizationCard: FC<VisualizationCardProps> = ({
id,
title,
description,
url,
}) => {
const [open, setOpen] = useState(false);
const closeDialog = () => setOpen(false);
const {
typography: { h4, p },
colors: { leafcutterLightBlue, leafcutterElectricBlue },
} = useAppContext();
const finalURL = `${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`;
return (
<>
<Grid item xs={6}>
<Card
elevation={0}
sx={{
border: `1px solid ${leafcutterElectricBlue}`,
borderRadius: "10px",
backgroundColor: leafcutterLightBlue,
p: 2,
cursor: "pointer",
}}
onClick={() => setOpen(true)}
>
<Box
sx={{
backgroundColor: leafcutterLightBlue,
pointerEvents: "none",
borderRadius: "8px",
overflow: "hidden",
p: 1,
}}
>
<Iframe url={finalURL} height="300" width="100%" frameBorder={0} />
</Box>
<Box component="h4" sx={{ ...h4, mt: 2, mb: 2 }}>
{title}
</Box>
<Box component="p" sx={{ ...p, mt: 2, mb: 2 }}>
{description}
</Box>
</Card>
</Grid>
{open ? (
<VisualizationDetailDialog
id={id}
title={title}
description={description}
url={url}
closeDialog={closeDialog}
editing={false}
/>
) : null}
</>
);
};

45
apps/leafcutter/app/_components/VisualizationDetail.tsx Normal file
View file

@ -0,0 +1,45 @@
"use client";
import { FC } from "react";
// import Link from "next/link";
import { Box } from "@mui/material";
import Iframe from "react-iframe";
import { useAppContext } from "@/app/_components/AppProvider";
interface VisualizationDetailProps {
id: string;
title: string;
description: string;
url: string;
editing: boolean;
}
export const VisualizationDetail: FC<VisualizationDetailProps> = ({
id,
title,
description,
url,
editing,
}) => {
const {
colors: { mediumGray },
typography: { h4, p },
} = useAppContext();
const finalURL = `${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`;
return (
<Box key={id}>
{!editing ? (
<Box sx={{ borderBottom: `1px solid ${mediumGray}`, mb: 2 }}>
<Box sx={{ ...h4, mt: 1, mb: 1 }}>{title}</Box>
<Box sx={{ ...p, mt: 0, mb: 2, fontStyle: "oblique" }}>
{description}
</Box>
</Box>
) : null}
<Box sx={{ borderBottom: `1px solid ${mediumGray}`, pb: 3 }}>
<Iframe url={finalURL} height="500px" width="100%" frameBorder={0} />
</Box>
</Box>
);
};

157
apps/leafcutter/app/_components/VisualizationDetailDialog.tsx Normal file
View file

@ -0,0 +1,157 @@
"use client";
import { FC, useState } from "react";
// import Link from "next/link";
import {
Grid,
Button,
Dialog,
DialogActions,
DialogContent,
TextField,
} from "@mui/material";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "@/app/_components/AppProvider";
import { VisualizationDetail } from "./VisualizationDetail";
interface VisualizationDetailDialogProps {
id: string;
title: string;
description: string;
url: string;
closeDialog: any;
editing: boolean;
}
export const VisualizationDetailDialog: FC<VisualizationDetailDialogProps> = ({
id,
title,
description,
url,
closeDialog,
editing,
}) => {
const t = useTranslate();
const [editedTitle, setEditedTitle] = useState(title);
const [editedDescription, setEditedDescription] = useState(description);
const {
colors: { leafcutterElectricBlue, leafcutterLightBlue, white, almostBlack },
query,
} = useAppContext();
const deleteAndClose = async () => {
await fetch(`/api/visualizations/delete`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({ id }),
});
closeDialog();
};
const saveAndClose = async () => {
const updateParams = {
id,
title: editedTitle,
description: editedDescription,
query,
};
await fetch(`/api/visualizations/update`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(updateParams),
});
closeDialog();
};
const buttonStyles = {
fontSize: 14,
borderRadius: 500,
color: white,
backgroundColor: leafcutterElectricBlue,
fontWeight: "bold",
textTransform: "uppercase",
pl: 3,
pr: 3,
":hover": {
backgroundColor: leafcutterLightBlue,
color: almostBlack,
opacity: 0.8,
},
};
return (
<Dialog open maxWidth="xl">
<DialogContent sx={{ minWidth: 800 }}>
{editing && (
<Grid direction="column" container rowGap={2} sx={{ mb: 3 }}>
<Grid item>
<TextField
value={editedTitle}
onChange={(e) => setEditedTitle(e.target.value)}
label={t("title")}
size="small"
fullWidth
/>
</Grid>
<Grid>
<TextField
value={editedDescription}
onChange={(e) => setEditedDescription(e.target.value)}
label={t("description")}
size="small"
fullWidth
/>
</Grid>
</Grid>
)}
<VisualizationDetail
id={id}
title={title}
description={description}
url={url}
editing={editing}
/>
</DialogContent>
<DialogActions sx={{ p: 2.5, pt: 0 }}>
<Grid container direction="row-reverse" justifyContent="space-between">
{!editing && (
<Grid item>
<Button sx={buttonStyles} onClick={closeDialog} size="small">
{t("done")}
</Button>
</Grid>
)}
{!editing && (
<Grid item>
<Button sx={buttonStyles} onClick={deleteAndClose} size="small">
{t("delete")}
</Button>
</Grid>
)}
{editing && (
<Grid item>
<Button sx={buttonStyles} onClick={saveAndClose} size="small">
{t("save")}
</Button>
</Grid>
)}
{editing && (
<Grid item>
<Button sx={buttonStyles} onClick={deleteAndClose} size="small">
{t("cancel")}
</Button>
</Grid>
)}
</Grid>
</DialogActions>
</Dialog>
);
};

110
apps/leafcutter/app/_components/VisualizationSelectCard.tsx Normal file
View file

@ -0,0 +1,110 @@
"use client";
import { FC } from "react";
import Image from "next/legacy/image";
import { Card, Grid } from "@mui/material";
import horizontalBar from "images/horizontal-bar.svg";
import horizontalBarStacked from "images/horizontal-bar-stacked.svg";
import verticalBar from "images/vertical-bar.svg";
import verticalBarStacked from "images/vertical-bar-stacked.svg";
import pieDonut from "images/pie-donut.svg";
import line from "images/line.svg";
import lineStacked from "images/line-stacked.svg";
import dataTable from "images/data-table.svg";
import metric from "images/metric.svg";
import tagCloud from "images/tag-cloud.svg";
import { useAppContext } from "./AppProvider";
interface VisualizationSelectCardProps {
visualizationType: string;
title: string;
enabled: boolean;
selected: boolean;
toggleSelected: any;
}
export const VisualizationSelectCard: FC<VisualizationSelectCardProps> = ({
visualizationType,
title,
enabled,
selected,
toggleSelected,
}) => {
const {
typography: { small },
colors: {
white,
leafcutterElectricBlue,
leafcutterLightBlue,
cdrLinkOrange,
},
} = useAppContext();
const images: any = {
horizontalBar,
horizontalBarStacked,
verticalBar,
verticalBarStacked,
line,
lineStacked,
pieDonut,
dataTable,
metric,
tagCloud,
unknown: line,
};
let backgroundColor = leafcutterElectricBlue;
if (!enabled) {
backgroundColor = leafcutterLightBlue;
} else if (selected) {
backgroundColor = cdrLinkOrange;
}
return (
<Card
sx={{
height: "100px",
backgroundColor,
borderRadius: "10px",
padding: "10px",
opacity: enabled ? 1 : 0.5,
cursor: enabled ? "pointer" : "default",
"&:hover": {
backgroundColor: enabled ? cdrLinkOrange : white,
},
}}
elevation={enabled ? 2 : 0}
onClick={() => toggleSelected(visualizationType)}
>
<Grid
direction="column"
container
justifyContent="space-around"
alignContent="center"
alignItems="center"
wrap="nowrap"
sx={{ height: "100%" }}
spacing={0}
>
<Grid
item
sx={{
...small,
textAlign: "center",
color: enabled ? white : leafcutterElectricBlue,
}}
>
{title}
</Grid>
<Grid item>
<Image
src={images[visualizationType]}
alt=""
width={35}
height={35}
/>
</Grid>
</Grid>
</Card>
);
};

55
apps/leafcutter/app/_components/Welcome.tsx Normal file
View file

@ -0,0 +1,55 @@
"use client";
import { Box, Grid } from "@mui/material";
import { useSession } from "next-auth/react";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
export const Welcome = () => {
const t = useTranslate();
const { data: session } = useSession();
const {
user: { name },
} = session as any;
const {
colors: { white, leafcutterElectricBlue },
typography: { h1, h4, p },
} = useAppContext();
return (
<Box
sx={{
width: "100%",
backgroundColor: leafcutterElectricBlue,
color: white,
p: 4,
borderRadius: "10px",
mb: "22px",
}}
>
<Grid container direction="row" spacing={3}>
{/* <Grid
item
container
xs={3}
direction="column"
justifyContent="flex-start"
alignItems="center"
>
<img src={image} alt={name} width="150px" />
</Grid> */}
<Grid item xs={12}>
<Box component="h1" sx={{ ...h1, mb: 1 }}>
{t("dashboardTitle")}
</Box>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>{`${t("welcome")}, ${
name?.split(" ")[0]
}! 👋`}</Box>
<Box component="p" sx={{ ...p }}>
{t("dashboardDescription")}
</Box>
</Grid>
</Grid>
</Box>
);
};

139
apps/leafcutter/app/_components/WelcomeDialog.tsx Normal file
View file

@ -0,0 +1,139 @@
"use client";
import { Box, Grid, Dialog, Button } from "@mui/material";
import { useRouter } from "next/router";
// import { useSession } from "next-auth/react";
// import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
export const WelcomeDialog = () => {
// const t = useTranslate();
const router = useRouter();
// const { data: session } = useSession();
// const { user } = session;
const {
colors: { white, leafcutterElectricBlue },
typography: { h1, h6, p },
} = useAppContext();
const activeTooltip = router.query.tooltip?.toString();
const open = activeTooltip === "welcome";
return (
<Dialog open={open} maxWidth="md" sx={{ zIndex: 2000 }}>
<Box sx={{ p: 6, pt: 6 }}>
<Grid container direction="column" spacing={3}>
<Grid item container direction="row" justifyContent="center">
<Grid
item
sx={{ width: 500, height: 300, backgroundColor: "black" }}
>
{/* <iframe
width="500"
height="300"
src="https://www.youtube-nocookie.com/embed/-iKFBXAlmEM"
title="CDR Link intro"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/> */}
</Grid>
</Grid>
<Grid item>
<Box
sx={{
...h1,
color: leafcutterElectricBlue,
textAlign: "center",
fontSize: 32,
}}
>
Welcome to Leafcutter!
</Box>
<Box
sx={{ ...h6, color: leafcutterElectricBlue, pt: 1, fontSize: 16 }}
>
Let&apos;s get started.
</Box>
</Grid>
<Grid item container spacing={3}>
<Grid item>
<Box sx={{ ...p, textAlign: "center" }}>
Leafcutter is a secure platform for aggregating, displaying, and
sharing data on digital security threats and attacks facing
global civil society. When creating the app we had a couple of
people in mind; Incident responders, threat analysts, security
trainers, and security service providers.
</Box>
</Grid>
<Grid item>
<Box sx={{ ...p, textAlign: "center" }}>
Leafcutter onboarding is meant to help you navigate, build
queries and visualizations, and walk you through the best ways
to know and use the Leafcutter app. Ready?
</Box>
</Grid>
</Grid>
<Grid
item
container
direction="row"
justifyContent="space-around"
sx={{ mt: 3 }}
>
<Grid item>
<Button
sx={{
fontSize: 14,
minWidth: 300,
borderRadius: 500,
color: leafcutterElectricBlue,
border: `2px solid ${leafcutterElectricBlue}`,
fontWeight: "bold",
textTransform: "uppercase",
pl: 6,
pr: 5,
":hover": {
backgroundColor: leafcutterElectricBlue,
color: white,
opacity: 0.8,
},
}}
onClick={() => {
router.push(`/`);
}}
>
I&apos;ll explore on my own
</Button>
</Grid>
<Grid item>
<Button
sx={{
fontSize: 14,
minWidth: 300,
borderRadius: 500,
backgroundColor: leafcutterElectricBlue,
color: white,
border: `2px solid ${leafcutterElectricBlue}`,
fontWeight: "bold",
textTransform: "uppercase",
pl: 6,
pr: 5,
":hover": {
backgroundColor: leafcutterElectricBlue,
color: white,
opacity: 0.8,
},
}}
onClick={() => {
router.push(`/?tooltip=navigation`);
}}
>
Start the guide
</Button>
</Grid>
</Grid>
</Grid>
</Box>
</Dialog>
);
};

1386
apps/leafcutter/app/_config/taxonomy.json Normal file
View file

File diff suppressed because it is too large Load diff

3239
apps/leafcutter/app/_config/unRegions.json Normal file
View file

File diff suppressed because it is too large Load diff

31
apps/leafcutter/app/_config/visualizationMap.json Normal file
View file

@ -0,0 +1,31 @@
{
"visualizations": {
"horizontalBar": {
"name": "Horizontal Bar"
},
"verticalBar": {
"name": "Vertical Bar"
},
"line": {
"name": "Line"
},
"pieDonut": {
"name": "Pie"
},
"dataTable": {
"name": "Data Table"
},
"metric": {
"name": "Metric"
},
"tagCloud": {
"name": "Tag Cloud"
}
},
"fields": {
"incidentType": ["horizontalBar"],
"targetedGroup": ["horizontalBar"],
"impactedTechnology": ["horizontalBar"],
"region": ["horizontalBar"]
}
}

38
apps/leafcutter/app/_config/visualizations/dataTable.json Normal file
View file

@ -0,0 +1,38 @@
{
"title": "DataTable",
"type": "table",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "incident.keyword",
"orderBy": "1",
"order": "desc",
"size": 10,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "bucket"
}
],
"params": {
"perPage": 10,
"showPartialRows": false,
"showMetricsAtAllLevels": false,
"sort": { "columnIndex": null, "direction": null },
"showTotal": false,
"totalFunc": "sum",
"percentageCol": ""
}
}

93
apps/leafcutter/app/_config/visualizations/horizontalBar.json Normal file
View file

@ -0,0 +1,93 @@
{
"title": "",
"type": "horizontal_bar",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "incident.keyword",
"orderBy": "1",
"order": "desc",
"size": 5,
"otherBucket": true,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "segment"
}
],
"params": {
"type": "histogram",
"grid": { "categoryLines": false },
"categoryAxes": [
{
"id": "CategoryAxis-1",
"type": "category",
"position": "left",
"show": true,
"style": {},
"scale": { "type": "linear" },
"labels": {
"show": true,
"rotate": 0,
"filter": false,
"truncate": 200
},
"title": {}
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"name": "LeftAxis-1",
"type": "value",
"position": "bottom",
"show": true,
"style": {},
"scale": { "type": "linear", "mode": "normal" },
"labels": {
"show": true,
"rotate": 75,
"filter": true,
"truncate": 100
},
"title": { "text": "Count" }
}
],
"seriesParams": [
{
"show": true,
"type": "histogram",
"mode": "normal",
"data": { "label": "Count", "id": "1" },
"valueAxis": "ValueAxis-1",
"drawLinesBetweenPoints": true,
"lineWidth": 2,
"showCircles": true
}
],
"addTooltip": true,
"addLegend": true,
"legendPosition": "right",
"times": [],
"addTimeMarker": false,
"labels": {},
"thresholdLine": {
"show": false,
"value": 10,
"width": 1,
"style": "full",
"color": "#E7664C"
}
}
}

94
apps/leafcutter/app/_config/visualizations/horizontalBarStacked.json Normal file
View file

@ -0,0 +1,94 @@
{
"title": "BarStacked",
"type": "horizontal_bar",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "actor.keyword",
"orderBy": "_key",
"order": "desc",
"size": 5,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "split"
}
],
"params": {
"type": "histogram",
"grid": { "categoryLines": false },
"categoryAxes": [
{
"id": "CategoryAxis-1",
"type": "category",
"position": "left",
"show": true,
"style": {},
"scale": { "type": "linear" },
"labels": {
"show": true,
"rotate": 0,
"filter": false,
"truncate": 200
},
"title": {}
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"name": "LeftAxis-1",
"type": "value",
"position": "bottom",
"show": true,
"style": {},
"scale": { "type": "linear", "mode": "normal" },
"labels": {
"show": true,
"rotate": 75,
"filter": true,
"truncate": 100
},
"title": { "text": "Count" }
}
],
"seriesParams": [
{
"show": true,
"type": "histogram",
"mode": "stacked",
"data": { "label": "Count", "id": "1" },
"valueAxis": "ValueAxis-1",
"drawLinesBetweenPoints": true,
"lineWidth": 2,
"showCircles": true
}
],
"addTooltip": true,
"addLegend": true,
"legendPosition": "right",
"times": [],
"addTimeMarker": false,
"labels": {},
"thresholdLine": {
"show": false,
"value": 10,
"width": 1,
"style": "full",
"color": "#E7664C"
},
"row": true
}
}

89
apps/leafcutter/app/_config/visualizations/line.json Normal file
View file

@ -0,0 +1,89 @@
{
"title": "Line",
"type": "line",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "technology.keyword",
"orderBy": "1",
"order": "desc",
"size": 5,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "segment"
}
],
"params": {
"type": "line",
"grid": { "categoryLines": false },
"categoryAxes": [
{
"id": "CategoryAxis-1",
"type": "category",
"position": "bottom",
"show": true,
"style": {},
"scale": { "type": "linear" },
"labels": { "show": true, "filter": true, "truncate": 100 },
"title": {}
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"name": "LeftAxis-1",
"type": "value",
"position": "left",
"show": true,
"style": {},
"scale": { "type": "linear", "mode": "normal" },
"labels": {
"show": true,
"rotate": 0,
"filter": false,
"truncate": 100
},
"title": { "text": "Count" }
}
],
"seriesParams": [
{
"show": true,
"type": "line",
"mode": "normal",
"data": { "label": "Count", "id": "1" },
"valueAxis": "ValueAxis-1",
"drawLinesBetweenPoints": true,
"lineWidth": 2,
"interpolate": "linear",
"showCircles": true
}
],
"addTooltip": true,
"addLegend": true,
"legendPosition": "right",
"times": [],
"addTimeMarker": false,
"labels": {},
"thresholdLine": {
"show": false,
"value": 10,
"width": 1,
"style": "full",
"color": "#E7664C"
}
}
}

105
apps/leafcutter/app/_config/visualizations/lineStacked.json Normal file
View file

@ -0,0 +1,105 @@
{
"title": "LineStacked",
"type": "line",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "technology.keyword",
"orderBy": "1",
"order": "desc",
"size": 5,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "segment"
}
],
"params": {
"type": "line",
"grid": { "categoryLines": false },
"categoryAxes": [
{
"id": "CategoryAxis-1",
"type": "category",
"position": "bottom",
"show": true,
"style": {},
"scale": { "type": "linear" },
"labels": { "show": true, "filter": true, "truncate": 100 },
"title": {}
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"name": "LeftAxis-1",
"type": "value",
"position": "left",
"show": true,
"style": {},
"scale": { "type": "linear", "mode": "normal" },
"labels": {
"show": true,
"rotate": 0,
"filter": false,
"truncate": 100
},
"title": { "text": "Count" }
},
{
"id": "ValueAxis-2",
"name": "RightAxis-1",
"type": "value",
"position": "right",
"show": true,
"style": {},
"scale": { "type": "linear", "mode": "normal" },
"labels": {
"show": true,
"rotate": 0,
"filter": false,
"truncate": 100
},
"title": { "text": "Count" }
}
],
"seriesParams": [
{
"show": true,
"type": "line",
"mode": "stacked",
"data": { "label": "Count", "id": "1" },
"valueAxis": "ValueAxis-2",
"drawLinesBetweenPoints": true,
"lineWidth": 2,
"interpolate": "step-after",
"showCircles": true
}
],
"addTooltip": true,
"addLegend": true,
"legendPosition": "right",
"times": [],
"addTimeMarker": false,
"labels": {},
"thresholdLine": {
"show": false,
"value": 10,
"width": 1,
"style": "full",
"color": "#E7664C"
}
}
}

50
apps/leafcutter/app/_config/visualizations/metric.json Normal file
View file

@ -0,0 +1,50 @@
{
"title": "Metric",
"type": "metric",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": { "customLabel": "#" },
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "technology.keyword",
"orderBy": "1",
"order": "desc",
"size": 5,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "group"
}
],
"params": {
"addTooltip": true,
"addLegend": false,
"type": "metric",
"metric": {
"percentageMode": false,
"useRanges": false,
"colorSchema": "Green to Red",
"metricColorMode": "None",
"colorsRange": [{ "from": 0, "to": 10000 }],
"labels": { "show": true },
"invertColors": false,
"style": {
"bgFill": "#000",
"bgColor": false,
"labelColor": false,
"subText": "",
"fontSize": 60
}
}
}
}

42
apps/leafcutter/app/_config/visualizations/pieDonut.json Normal file
View file

@ -0,0 +1,42 @@
{
"title": "Pie",
"type": "pie",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "technology.keyword",
"orderBy": "1",
"order": "desc",
"size": 5,
"otherBucket": true,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "segment"
}
],
"params": {
"type": "pie",
"addTooltip": true,
"addLegend": true,
"legendPosition": "right",
"isDonut": true,
"labels": {
"show": false,
"values": true,
"last_level": true,
"truncate": 100
}
}
}

36
apps/leafcutter/app/_config/visualizations/tagCloud.json Normal file
View file

@ -0,0 +1,36 @@
{
"title": "Cloud",
"type": "tagcloud",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "incident.keyword",
"orderBy": "1",
"order": "desc",
"size": 5,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "segment"
}
],
"params": {
"scale": "linear",
"orientation": "single",
"minFontSize": 18,
"maxFontSize": 72,
"showLabel": true
}
}

88
apps/leafcutter/app/_config/visualizations/verticalBar.json Normal file
View file

@ -0,0 +1,88 @@
{
"title": "VerticalBar",
"type": "histogram",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "actor.keyword",
"orderBy": "1",
"order": "desc",
"size": 10,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "segment"
}
],
"params": {
"type": "histogram",
"grid": { "categoryLines": false },
"categoryAxes": [
{
"id": "CategoryAxis-1",
"type": "category",
"position": "bottom",
"show": true,
"style": {},
"scale": { "type": "linear" },
"labels": { "show": true, "filter": true, "truncate": 100 },
"title": {}
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"name": "LeftAxis-1",
"type": "value",
"position": "left",
"show": true,
"style": {},
"scale": { "type": "linear", "mode": "normal" },
"labels": {
"show": true,
"rotate": 0,
"filter": false,
"truncate": 100
},
"title": { "text": "Count" }
}
],
"seriesParams": [
{
"show": true,
"type": "histogram",
"mode": "normal",
"data": { "label": "Count", "id": "1" },
"valueAxis": "ValueAxis-1",
"drawLinesBetweenPoints": true,
"lineWidth": 2,
"showCircles": true
}
],
"addTooltip": true,
"addLegend": true,
"legendPosition": "right",
"times": [],
"addTimeMarker": false,
"labels": { "show": false },
"thresholdLine": {
"show": false,
"value": 10,
"width": 1,
"style": "full",
"color": "#E7664C"
}
}
}

88
apps/leafcutter/app/_config/visualizations/verticalBarStacked.json Normal file
View file

@ -0,0 +1,88 @@
{
"title": "VerticalBarStacked",
"type": "histogram",
"aggs": [
{
"id": "1",
"enabled": true,
"type": "count",
"params": {},
"schema": "metric"
},
{
"id": "2",
"enabled": true,
"type": "terms",
"params": {
"field": "incident.keyword",
"orderBy": "1",
"order": "desc",
"size": 5,
"otherBucket": false,
"otherBucketLabel": "Other",
"missingBucket": false,
"missingBucketLabel": "Missing"
},
"schema": "segment"
}
],
"params": {
"type": "histogram",
"grid": { "categoryLines": false },
"categoryAxes": [
{
"id": "CategoryAxis-1",
"type": "category",
"position": "bottom",
"show": true,
"style": {},
"scale": { "type": "linear" },
"labels": { "show": true, "filter": true, "truncate": 100 },
"title": {}
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"name": "LeftAxis-1",
"type": "value",
"position": "left",
"show": true,
"style": {},
"scale": { "type": "linear", "mode": "normal" },
"labels": {
"show": true,
"rotate": 0,
"filter": false,
"truncate": 100
},
"title": { "text": "Count" }
}
],
"seriesParams": [
{
"show": true,
"type": "histogram",
"mode": "stacked",
"data": { "label": "Count", "id": "1" },
"valueAxis": "ValueAxis-1",
"drawLinesBetweenPoints": true,
"lineWidth": 2,
"showCircles": true
}
],
"addTooltip": true,
"addLegend": true,
"legendPosition": "right",
"times": [],
"addTimeMarker": false,
"labels": { "show": false },
"thresholdLine": {
"show": false,
"value": 10,
"width": 1,
"style": "full",
"color": "#E7664C"
}
}
}

5
apps/leafcutter/app/_lib/createEmotionCache.ts Normal file
View file

@ -0,0 +1,5 @@
import createCache from "@emotion/cache";
export default function createEmotionCache() {
return createCache({ key: "css" });
}

567
apps/leafcutter/app/_lib/opensearch.ts Normal file
View file

@ -0,0 +1,567 @@
/* eslint-disable no-underscore-dangle */
import { Client } from "@opensearch-project/opensearch";
import { v4 as uuid } from "uuid";
/* Common */
const globalIndex = ".kibana_1";
const dataIndexName = "sample_tagged_tickets";
const userMetadataIndexName = "user_metadata";
const baseURL = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;
const createClient = () => new Client({
node: baseURL,
ssl: {
rejectUnauthorized: false,
},
});
const getDocumentID = (doc: any) => doc._id.split(":")[1];
const getEmbedURL = (tenant: string, visualizationID: string) =>
`/app/visualize?security_tenant=${tenant}#/edit/${visualizationID}?embed=true`;
export const getVisualization = async (id: string) => {
const client = createClient();
const res = await client.get({
id: `visualization:${id}`,
index: globalIndex,
});
return res.body._source;
};
const generateKuery = (searchQuery: any) => {
const searchTemplate = {
query: {
query: "",
language: "kuery",
},
filter: [],
indexRefName: "kibanaSavedObjectMeta.searchSourceJSON.index",
};
const incidentTypeClause = searchQuery.incidentType.values
.map((value: string) => `incident:${value} `)
.join(" or ");
const allTechnologies = [
...searchQuery.platform.values,
...searchQuery.device.values,
...searchQuery.service.values,
...searchQuery.maker.values,
];
const technologyClause = allTechnologies
.map((value: string) => `technology:${value} `)
.join(" or ");
const targetedGroupClause = searchQuery.targetedGroup.values
.map((value: string) => `targeted_group:${value} `)
.join(" or ");
const countryClause = searchQuery.country.values
.map((value: string) => `country:${value} `)
.join(" or ");
const subregionClause = searchQuery.subregion.values
.map((value: string) => `region:${value} `)
.join(" or ");
const continentClause = searchQuery.continent.values
.map((value: string) => `continent:${value} `)
.join(" or ");
const kueryString = [
incidentTypeClause,
technologyClause,
targetedGroupClause,
countryClause,
subregionClause,
continentClause,
]
.filter((clause) => clause !== "")
.join(" and ");
searchTemplate.query.query = kueryString;
return JSON.stringify(searchTemplate);
};
export const getUserMetadata = async (username: string) => {
const client = createClient();
let res: any;
try {
res = await client.get({
id: username,
index: userMetadataIndexName,
});
} catch (e) {
await client.create({
id: username,
index: userMetadataIndexName,
body: { username, savedSearches: [] }
});
res = await client.get({
id: username,
index: userMetadataIndexName,
});
}
return res?.body._source;
};
export const saveUserMetadata = async (username: string, metadata: any) => {
const client = createClient();
await client.update({
id: username,
index: userMetadataIndexName,
body: { doc: { username, ...metadata } }
});
};
/* User */
const getCurrentUserIndex = async (email: string) => {
const userIndexName = email.replace(/[\W\d_]/g, "").toLowerCase();
const client = createClient();
const aliasesResponse = await client.indices.getAlias({
name: `.kibana_*_${userIndexName}`,
});
// prefer alias if it exists
if (Object.keys(aliasesResponse.body).length > 0) {
return Object.keys(aliasesResponse.body)[0];
}
const indicesResponse = await client.indices.get({
index: `.kibana_*_${userIndexName}_1`,
});
const currentUserIndex = Object.keys(indicesResponse.body)[0];
return currentUserIndex;
};
const getIndexPattern: any = async (index: string) => {
const client = createClient();
const query = {
query: {
bool: {
must: [
{ match: { type: "index-pattern" } },
{
match: {
"index-pattern.title": dataIndexName,
},
},
],
},
},
};
const res = await client.search({
index,
size: 1,
body: query,
sort: ["updated_at:desc"],
});
if (res.body.hits.total.value === 0) {
// eslint-disable-next-line no-use-before-define
return createCurrentUserIndexPattern(index);
}
const {
hits: {
hits: [indexPattern],
},
} = res.body;
return indexPattern;
};
const createCurrentUserIndexPattern = async (index: string) => {
const { _source: globalIndexPattern } = await getIndexPattern(globalIndex);
globalIndexPattern.updated_at = new Date().toISOString();
const id = uuid();
const fullID = `index-pattern:${id}`;
const client = createClient();
const res = await client.create({
id: fullID,
index,
refresh: true,
body: globalIndexPattern,
});
return res.body;
};
const getIndexPatternID = async (index: string) => {
const indexPattern = await getIndexPattern(index);
return getDocumentID(indexPattern);
};
interface createUserVisualizationProps {
email: string;
query: any;
visualizationID: string;
title: string;
description: string;
}
export const createUserVisualization = async (
props: createUserVisualizationProps
) => {
const { email, query, visualizationID, title, description } = props;
const userIndex = await getCurrentUserIndex(email);
const indexPatternID = await getIndexPatternID(userIndex);
const id = uuid();
const fullID = `visualization:${id}`;
const template: any = await getVisualization(visualizationID);
template.visualization.title = title;
template.visualization.description = description;
template.visualization.kibanaSavedObjectMeta.searchSourceJSON =
generateKuery(query);
template.references = [
{
name: "kibanaSavedObjectMeta.searchSourceJSON.index",
type: "index-pattern",
id: indexPatternID,
},
];
template.updated_at = new Date().toISOString();
const client = createClient();
const res = await client.create({
id: fullID,
index: userIndex,
refresh: true,
body: template,
});
return getDocumentID(res.body);
};
export const getUserVisualization = async (email: string, id: string) => {
const userIndex = await getCurrentUserIndex(email);
const client = createClient();
const res = await client.get({
id: `visualization:${id}`,
index: userIndex,
});
return res.body;
};
interface updateVisualizationProps {
email: string;
id: string;
query: any;
title: string;
description: string;
}
export const updateUserVisualization = async (
props: updateVisualizationProps
) => {
const { email, id, query, title, description } = props;
const userIndex = await getCurrentUserIndex(email);
const result: any = await getUserVisualization(email, id);
const body = {
doc: result._source,
};
body.doc.visualization.title = title;
body.doc.visualization.description = description;
body.doc.visualization.kibanaSavedObjectMeta.searchSourceJSON =
generateKuery(query);
const client = createClient();
try {
await client.update({
id: `visualization:${id}`,
index: userIndex,
body,
});
} catch (e) {
// eslint-disable-next-line no-console
console.log({ e });
}
return id;
};
export const deleteUserVisualization = async (email: string, id: string) => {
const userIndex = await getCurrentUserIndex(email);
const client = createClient();
client.delete({
id: `visualization:${id}`,
index: userIndex,
});
};
export const getUserVisualizations = async (email: string, limit: number) => {
const userIndex = await getCurrentUserIndex(email);
const client = createClient();
const query = {
query: {
match: { type: "visualization" },
},
};
const res = await client.search({
index: userIndex,
size: limit,
body: query,
sort: ["updated_at:desc"],
});
const {
hits: { hits },
} = res.body;
const results = hits.map((hit: any) => ({
id: getDocumentID(hit),
title: hit._source.visualization.title,
description: hit._source.visualization.description ?? "",
url: getEmbedURL("private", getDocumentID(hit)),
}));
return results;
};
/* Global */
export const performQuery = async (searchQuery: any, limit: number) => {
const client = createClient();
const body = {
query: {
bool: {
must: [],
},
},
};
if (searchQuery.relativeDate.values.length > 0) {
searchQuery.relativeDate.values.forEach((value: string) => {
// @ts-expect-error
body.query.bool.must.push({
range: {
date: {
gte: `now-${value}d`,
},
},
});
});
}
if (searchQuery.startDate.values.length > 0) {
searchQuery.startDate.values.forEach((value: string) => {
// @ts-expect-error
body.query.bool.must.push({
range: {
date: {
gte: value,
},
},
});
});
}
if (searchQuery.endDate.values.length > 0) {
searchQuery.endDate.values.forEach((value: string) => {
// @ts-expect-error
body.query.bool.must.push({
range: {
date: {
lte: value,
},
},
});
});
}
if (searchQuery.incidentType.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "incident.keyword": searchQuery.incidentType.values },
});
}
if (searchQuery.targetedGroup.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "targeted_group.keyword": searchQuery.targetedGroup.values },
});
}
if (searchQuery.platform.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "technology.keyword": searchQuery.platform.values },
});
}
if (searchQuery.device.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "technology.keyword": searchQuery.device.values },
});
}
if (searchQuery.service.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "technology.keyword": searchQuery.service.values },
});
}
if (searchQuery.maker.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "technology.keyword": searchQuery.maker.values },
});
}
if (searchQuery.subregion.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "region.keyword": searchQuery.subregion.values },
});
}
if (searchQuery.country.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "country.keyword": searchQuery.country.values },
});
}
if (searchQuery.continent.values.length > 0) {
// @ts-expect-error
body.query.bool.must.push({
terms: { "continent.keyword": searchQuery.continent.values },
});
}
const dataResponse = await client.search({
index: dataIndexName,
size: limit,
body,
sort: ["date:desc"],
});
const {
hits: { hits },
} = dataResponse.body;
const results = hits.map((hit: any) => ({
...hit._source,
id: hit._id,
incident: Array.isArray(hit._source.incident) ? hit._source.incident.join(", ") : hit._source.incident,
technology: Array.isArray(hit._source.technology) ? hit._source.technology.join(", ") : hit._source.technology,
targeted_group: Array.isArray(hit._source.targeted_group) ? hit._source.targeted_group.join(", ") : hit._source.targeted_group,
country: Array.isArray(hit._source.country) ? hit._source.country.join(", ") : hit._source.country,
}));
return results;
};
const cleanTitle = (title: string) =>
title?.replace(/^\[[a-zA-Z]+\] /g, "") ?? "";
const getVisualizationType = (hit: any) => {
const { title, visState } = hit._source.visualization;
const rawType = JSON.parse(visState).type;
let type = "unknown";
if (
rawType === "horizontal_bar" &&
title.includes("Horizontal Bar Stacked")
) {
type = "horizontalBarStacked";
} else if (rawType === "horizontal_bar" && title.includes("Horizontal Bar")) {
type = "horizontalBar";
} else if (
rawType === "histogram" &&
title.includes("Vertical Bar Stacked")
) {
type = "verticalBarStacked";
} else if (rawType === "histogram" && title.includes("Vertical Bar")) {
type = "verticalBar";
} else if (rawType === "histogram" && title.includes("Line Stacked")) {
type = "lineStacked";
} else if (rawType === "histogram" && title.includes("Line")) {
type = "line";
} else if (rawType === "pie") {
type = "pieDonut";
} else if (rawType === "table") {
type = "dataTable";
} else if (rawType === "metric") {
type = "metric";
} else if (rawType === "tagcloud") {
type = "tagCloud";
}
return type;
};
export const getTrends = async (limit: number) => {
const client = createClient();
const query = {
query: {
bool: {
must: [
{ match: { type: "visualization" } },
{
match_bool_prefix: {
"visualization.title": "[Trend]",
},
},
],
},
},
};
const rawResponse = await client.search({
index: globalIndex,
size: limit,
body: query,
sort: ["updated_at:desc"],
});
const response = rawResponse.body;
const {
hits: { hits },
} = response;
const results = hits.map((hit: any) => ({
id: getDocumentID(hit),
title: cleanTitle(hit._source.visualization.title),
description: hit._source.visualization.description,
url: getEmbedURL("global", getDocumentID(hit)),
}));
return results;
};
export const getTemplates = async (limit: number) => {
const client = createClient();
const query = {
query: {
bool: {
must: [
{ match: { type: "visualization" } },
{
match_bool_prefix: {
"visualization.title": "Templated",
},
},
],
},
},
};
const rawResponse = await client.search({
index: globalIndex,
size: limit,
body: query,
});
const response = rawResponse.body;
const {
hits: { hits },
} = response;
const results = hits.map((hit: any) => ({
id: getDocumentID(hit),
title: cleanTitle(hit._source.visualization.title),
type: getVisualizationType(hit),
}));
results.sort((a: any, b: any) => a.title.localeCompare(b.title));
return results;
};

4
apps/leafcutter/app/_lib/utils.ts Normal file
View file

@ -0,0 +1,4 @@
import { GetServerSidePropsContext } from "next";
export const getEmbedded = (context: GetServerSidePropsContext) =>
context.req.headers["x-leafcutter-embedded"] === "true";

173
apps/leafcutter/app/about/page.tsx Normal file
View file

@ -0,0 +1,173 @@
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { useTranslate } from "react-polyglot";
import Head from "next/head";
import Image from "next/legacy/image";
import Link from "next/link";
import { Grid, Container, Box, Button } from "@mui/material";
import { useAppContext } from "@/app/_components/AppProvider";
import { PageHeader } from "@/app/_components/PageHeader";
import { AboutFeature } from "@/app/_components/AboutFeature";
import { AboutBox } from "@/app/_components/AboutBox";
import AbstractDiagram from "images/abstract-diagram.png";
import AboutHeader from "images/about-header.png";
import Globe from "images/globe.png";
import Controls from "images/controls.png";
import CommunityBackground from "images/community-background.png";
import Bicycle from "images/bicycle.png";
import { getEmbedded } from "@/app/_lib/utils";
type AboutProps = {
embedded: boolean;
};
const About: NextPage<AboutProps> = ({ embedded }) => {
const t = useTranslate();
const {
colors: { white, leafcutterElectricBlue, cdrLinkOrange },
typography: { h1, h4, p },
} = useAppContext();
return (
<>
<PageHeader
backgroundColor={leafcutterElectricBlue}
sx={{
backgroundImage: `url(${AboutHeader.src})`,
backgroundSize: "200px",
backgroundPosition: "bottom right",
backgroundRepeat: "no-repeat",
}}
>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item xs={9}>
<Box component="h1" sx={h1}>
{t("aboutLeafcutterTitle")}
</Box>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
{t("aboutLeafcutterDescription")}
</Box>
</Grid>
</Grid>
</PageHeader>
<Container maxWidth="lg">
<AboutFeature
title={t("whatIsLeafcutterTitle")}
description={t("whatIsLeafcutterDescription")}
direction="row"
image={AbstractDiagram}
showBackground={false}
textColumns={8}
/>
<AboutFeature
title={t("whatIsItForTitle")}
description={t("whatIsItForDescription")}
direction="row-reverse"
image={Controls}
showBackground
textColumns={8}
/>
<AboutFeature
title={t("whoCanUseItTitle")}
description={t("whoCanUseItDescription")}
direction="row"
image={Globe}
showBackground
textColumns={6}
/>
</Container>
<AboutBox backgroundColor={cdrLinkOrange}>
<Box component="h4" sx={{ ...h4, mt: 0 }}>
{t("whereDataComesFromTitle")}
</Box>
{t("whereDataComesFromDescription")
.split("\n")
.map((line: string, i: number) => (
<Box component="p" key={i} sx={p}>
{line}
</Box>
))}
</AboutBox>
<AboutBox backgroundColor={leafcutterElectricBlue}>
<Box component="h4" sx={{ ...h4, mt: 0 }}>
{t("projectSupportTitle")}
</Box>
{t("projectSupportDescription")
.split("\n")
.map((line: string, i: number) => (
<Box component="p" key={i} sx={p}>
{line}
</Box>
))}
</AboutBox>
<Box
sx={{
backgroundImage: `url(${CommunityBackground.src})`,
backgroundSize: "90%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
position: "relative",
height: "700px",
}}
>
<Box sx={{ position: "absolute", left: 0, bottom: -20, width: 300 }}>
<Image src={Bicycle} alt="" />
</Box>
<Container
maxWidth="md"
sx={{ textAlign: "center", paddingTop: "280px" }}
>
<Box
component="h4"
sx={{ ...h4, maxWidth: 500, margin: "0 auto", mt: 3 }}
>
{t("interestedInLeafcutterTitle")}
</Box>
{t("interestedInLeafcutterDescription")
.split("\n")
.map((line: string, i: number) => (
<Box
component="p"
key={i}
sx={{ ...p, maxWidth: 500, margin: "0 auto" }}
>
{line}
</Box>
))}
<Link href="mailto:info@digiresilience.org" passHref>
<Button
sx={{
fontSize: 14,
borderRadius: 500,
color: white,
backgroundColor: cdrLinkOrange,
fontWeight: "bold",
textTransform: "uppercase",
pl: 6,
pr: 5,
mt: 4,
":hover": {
backgroundColor: leafcutterElectricBlue,
color: white,
opacity: 0.8,
},
}}
>
{t("contactUs")}
</Button>
</Link>
</Container>
</Box>
</>
);
};
export default About;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => ({ props: { embedded: getEmbedded(context) } });

19
apps/leafcutter/app/api/auth/[...nextauth]/route.ts Normal file
View file

@ -0,0 +1,19 @@
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";
import Apple from "next-auth/providers/apple";
const handler = NextAuth({
providers: [
Google({
clientId: process.env.GOOGLE_CLIENT_ID ?? "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
}),
Apple({
clientId: process.env.APPLE_CLIENT_ID ?? "",
clientSecret: process.env.APPLE_CLIENT_SECRET ?? "",
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
export { handler as GET, handler as POST };

38
apps/leafcutter/app/api/proxy/[[...path]].ts Normal file
View file

@ -0,0 +1,38 @@
import { createProxyMiddleware } from "http-proxy-middleware";
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
const withAuthInfo =
(handler: any) => async (req: NextApiRequest, res: NextApiResponse) => {
const session: any = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
req.headers["x-proxy-user"] = session.email.toLowerCase();
req.headers["x-proxy-roles"] = "leafcutter_user";
const auth = `${session.email.toLowerCase()}:${process.env.OPENSEARCH_USER_PASSWORD}`;
const buff = Buffer.from(auth);
const base64data = buff.toString("base64");
req.headers.Authorization = `Basic ${base64data}`;
return handler(req, res);
};
const proxy = createProxyMiddleware({
target: process.env.OPENSEARCH_DASHBOARDS_URL,
changeOrigin: true,
xfwd: true,
});
export default withAuthInfo(proxy);
export const config = {
api: {
bodyParser: false,
externalResolver: true,
},
};

32
apps/leafcutter/app/api/searches/create.ts Normal file
View file

@ -0,0 +1,32 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { getUserMetadata, saveUserMetadata } from "@/app/_lib/opensearch";
export const POST = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
if (req.method !== "POST") {
return res.status(500).json({ message: "Only POST requests are allowed" });
}
const { email }: any = session;
const { name, query } = JSON.parse(req.body);
const result = await getUserMetadata(email);
const { savedSearches } = result;
await saveUserMetadata(email, {
savedSearches: [...savedSearches, { name, query }]
});
const { savedSearches: updatedSavedSearches } = await getUserMetadata(email);
return res.json(updatedSavedSearches);
};

31
apps/leafcutter/app/api/searches/delete.ts Normal file
View file

@ -0,0 +1,31 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { getUserMetadata, saveUserMetadata } from "@/app/_lib/opensearch";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
if (req.method !== "POST") {
return res.status(500).json({ message: "Only POST requests are allowed" });
}
const { email }: any = session;
const { name } = JSON.parse(req.body);
const { savedSearches } = await getUserMetadata(email);
const updatedSavedSearches = savedSearches.filter((search: any) => search.name !== name);
const result = await saveUserMetadata(email, { savedSearches: updatedSavedSearches });
return res.json({ result });
};
export default handler;

25
apps/leafcutter/app/api/searches/list.ts Normal file
View file

@ -0,0 +1,25 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { getUserMetadata } from "@/app/_lib/opensearch";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
if (req.method !== "GET") {
return res.status(500).json({ message: "Only GET requests are allowed" });
}
const { email }: any = session;
const { savedSearches } = await getUserMetadata(email);
return res.json(savedSearches);
};
export default handler;

20
apps/leafcutter/app/api/trends/recent.ts Normal file
View file

@ -0,0 +1,20 @@
import { NextResponse } from "next/server";
// import { getToken } from "next-auth/jwt";
import { getTrends } from "@/app/_lib/opensearch";
export const GET = async () => {
/*
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
*/
const results = await getTrends(5);
NextResponse.json(results);
};

54
apps/leafcutter/app/api/upload/index.ts Normal file
View file

@ -0,0 +1,54 @@
/* eslint-disable no-restricted-syntax */
import { NextApiRequest, NextApiResponse } from "next";
import { Client } from "@opensearch-project/opensearch";
import { v4 as uuid } from "uuid";
import taxonomy from "app/_config/taxonomy.json";
import unRegions from "app/_config/unRegions.json";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const { headers: { authorization }, body: { tickets } } = req;
const baseURL = `https://${process.env.OPENSEARCH_URL}`;
const client = new Client({
node: baseURL,
ssl: {
rejectUnauthorized: false,
},
headers: {
authorization
}
});
const succeeded = [];
const failed = [];
for await (const ticket of tickets) {
const { id } = ticket;
try {
const country = ticket.country[0] ?? "none";
// @ts-expect-error
const translatedCountry = taxonomy.country[country]?.display ?? "none";
const countryDetails: any = unRegions.find((c) => c.name === translatedCountry);
const augmentedTicket = {
...ticket,
region: countryDetails['sub-region']?.toLowerCase().replace(" ", "-") ?? null,
continent: countryDetails.region?.toLowerCase().replace(" ", "-") ?? null,
};
const out = await client.create({
id: uuid(),
index: "sample_tagged_tickets",
refresh: true,
body: augmentedTicket,
});
console.log(out);
succeeded.push(id);
} catch (e) {
console.log(e);
failed.push(id);
}
}
const results = { succeeded, failed };
return res.json(results);
};
export default handler;

32
apps/leafcutter/app/api/visualizations/create.ts Normal file
View file

@ -0,0 +1,32 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { createUserVisualization } from "@/app/_lib/opensearch";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
if (req.method !== "POST") {
return res.status(500).json({ message: "Only POST requests are allowed" });
}
const { visualizationID, title, description, query } = req.body;
const id = await createUserVisualization({
email: session.email as string,
visualizationID,
title,
description,
query
});
return res.json({ id });
};
export default handler;

26
apps/leafcutter/app/api/visualizations/delete.ts Normal file
View file

@ -0,0 +1,26 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { deleteUserVisualization } from "@/app/_lib/opensearch";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
if (req.method !== "POST") {
return res.status(500).json({ message: "Only POST requests are allowed" });
}
const { id } = req.body;
await deleteUserVisualization(session.email as string, id);
return res.json({ id });
};
export default handler;

23
apps/leafcutter/app/api/visualizations/query.ts Normal file
View file

@ -0,0 +1,23 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { performQuery } from "@/app/_lib/opensearch";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
const { searchQuery } = req.query;
const rawQuery = await JSON.parse(decodeURI(searchQuery as string));
const results = await performQuery(rawQuery, 1000);
return res.json(results);
};
export default handler;

32
apps/leafcutter/app/api/visualizations/update.ts Normal file
View file

@ -0,0 +1,32 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { updateUserVisualization } from "@/app/_lib/opensearch";
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const session = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET,
});
if (!session) {
return res.redirect("/login");
}
if (req.method !== "POST") {
return res.status(500).json({ message: "Only POST requests are allowed" });
}
const { id, title, description, query } = req.body;
await updateUserVisualization({
email: session.email as string,
id,
title,
description,
query
});
return res.json({ id });
};
export default handler;

76
apps/leafcutter/app/create/page.tsx Normal file
View file

@ -0,0 +1,76 @@
import { FC, useEffect } from "react";
import { GetServerSideProps, GetServerSidePropsContext } from "next";
import { useTranslate } from "react-polyglot";
import { useRouter } from "next/router";
import { Box, Grid } from "@mui/material";
import { useCookies } from "react-cookie";
import { getTemplates } from "@/app/_lib/opensearch";
import { useAppContext } from "@/app/_components/AppProvider";
import { PageHeader } from "@/app/_components/PageHeader";
import { VisualizationBuilder } from "@/app/_components/VisualizationBuilder";
import { getEmbedded } from "@/app/_lib/utils";
type CreateProps = {
templates: any;
embedded: boolean;
};
const Create: FC<CreateProps> = ({ templates, embedded }) => {
const t = useTranslate();
const {
colors: { cdrLinkOrange },
typography: { h1, h4 },
} = useAppContext();
const router = useRouter();
const cookieName = "searchIntroComplete";
const [cookies, setCookie] = useCookies([cookieName]);
const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0;
useEffect(() => {
if (searchIntroComplete === 0) {
setCookie(cookieName, `${1}`, { path: "/" });
router.push(`${router.pathname}?group=search&tooltip=1&checklist=1`);
}
}, [searchIntroComplete, router, setCookie]);
return (
<>
<PageHeader backgroundColor={cdrLinkOrange}>
<Grid container direction="row" spacing={2} alignItems="center">
{/* <Grid item xs={2} sx={{ textAlign: "center" }}>
<Image src={SearchCreateHeader} width={100} height={100} alt="" />
</Grid> */}
<Grid container direction="column" item xs={10}>
<Grid item>
<Box component="h1" sx={{ ...h1 }}>
{t("searchAndCreateTitle")}
</Box>
</Grid>
<Grid item>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
{t("searchAndCreateSubtitle")}
</Box>
</Grid>
{/* <Grid>
<Box component="p" sx={{ ...p }}>
{t("searchAndCreateDescription")}
</Box>
</Grid> */}
</Grid>
</Grid>
</PageHeader>
<VisualizationBuilder templates={templates} />
</>
);
};
export default Create;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const templates = await getTemplates(100);
return { props: { templates, embedded: getEmbedded(context) } };
};

111
apps/leafcutter/app/faq/page.tsx Normal file
View file

@ -0,0 +1,111 @@
import { useTranslate } from "react-polyglot";
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { Box, Grid } from "@mui/material";
import { PageHeader } from "@/app/_components/PageHeader";
import { Question } from "@/app/_components/Question";
import { useAppContext } from "@/app/_components/AppProvider";
import FaqHeader from "images/faq-header.svg";
import { getEmbedded } from "@/app/_lib/utils";
type FAQProps = {
embedded: boolean;
};
const FAQ: NextPage<FAQProps> = ({ embedded }) => {
const t = useTranslate();
const {
colors: { lavender },
typography: { h1, h4, p },
} = useAppContext();
const questions = [
{
question: t("whatIsLeafcutterQuestion"),
answer: t("whatIsLeafcutterAnswer"),
},
{
question: t("whoBuiltLeafcutterQuestion"),
answer: t("whoBuiltLeafcutterAnswer"),
},
{
question: t("whoCanUseLeafcutterQuestion"),
answer: t("whoCanUseLeafcutterAnswer"),
},
{
question: t("whatCanYouDoWithLeafcutterQuestion"),
answer: t("whatCanYouDoWithLeafcutterAnswer"),
},
{
question: t("whereIsTheDataComingFromQuestion"),
answer: t("whereIsTheDataComingFromAnswer"),
},
{
question: t("whereIsTheDataStoredQuestion"),
answer: t("whereIsTheDataStoredAnswer"),
},
{
question: t("howDoWeKeepTheDataSafeQuestion"),
answer: t("howDoWeKeepTheDataSafeAnswer"),
},
{
question: t("howLongDoYouKeepTheDataQuestion"),
answer: t("howLongDoYouKeepTheDataAnswer"),
},
{
question: t("whatOrganizationsAreParticipatingQuestion"),
answer: t("whatOrganizationsAreParticipatingAnswer"),
},
{
question: t("howDidYouGetMyProfileInformationQuestion"),
answer: t("howDidYouGetMyProfileInformationAnswer"),
},
{
question: t("howCanILearnMoreAboutLeafcutterQuestion"),
answer: t("howCanILearnMoreAboutLeafcutterAnswer"),
},
];
return (
<>
<PageHeader
backgroundColor={lavender}
sx={{
backgroundImage: `url(${FaqHeader.src})`,
backgroundSize: "150px",
backgroundPosition: "bottom right",
backgroundRepeat: "no-repeat",
}}
>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>
<Box component="h1" sx={{ ...h1 }}>
{t("frequentlyAskedQuestionsTitle")}
</Box>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
{t("frequentlyAskedQuestionsSubtitle")}
</Box>
<Box component="p" sx={{ ...p }}>
{t("frequentlyAskedQuestionsDescription")}
</Box>
</Grid>
</Grid>
</PageHeader>
{questions.map((q: any, index: number) => (
<Question key={index} question={q.question} answer={q.answer} />
))}
</>
);
};
export default FAQ;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => ({ props: { embedded: getEmbedded(context) } });

36
apps/leafcutter/app/layout.tsx Normal file
View file

@ -0,0 +1,36 @@
import { ReactNode } from "react";
import { Metadata } from "next";
import "./_styles/global.css";
import "@fontsource/poppins/400.css";
import "@fontsource/poppins/700.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/700.css";
import "@fontsource/playfair-display/900.css";
import "styles/global.css";
// import getConfig from "next/config";
// import { LicenseInfo } from "@mui/x-data-grid-pro";
import { MultiProvider } from "app/_components/MultiProvider";
import { InternalLayout } from "app/_components/InternalLayout";
export const metadata: Metadata = {
title: "Leafcutter",
};
type LayoutProps = {
children: ReactNode;
};
export default function Layout({ children }: LayoutProps) {
// const { publicRuntimeConfig } = getConfig();
// LicenseInfo.setLicenseKey(publicRuntimeConfig.muiLicenseKey);
return (
<html lang="en">
<body>
<MultiProvider>
<InternalLayout>{children}</InternalLayout>
</MultiProvider>
</body>
</html>
);
}

126
apps/leafcutter/app/login/page.tsx Normal file
View file

@ -0,0 +1,126 @@
import Head from "next/head";
import { NextPage } from "next";
import Link from "next/link";
import Image from "next/legacy/image";
import { Box, Grid, Container, IconButton } from "@mui/material";
import { Apple as AppleIcon, Google as GoogleIcon } from "@mui/icons-material";
import { useTranslate } from "react-polyglot";
import { LanguageSelect } from "@/app/_components/LanguageSelect";
import LeafcutterLogoLarge from "images/leafcutter-logo-large.png";
import { signIn, getSession } from "next-auth/react";
import { useAppContext } from "@/app/_components/AppProvider";
type LoginProps = {
session: any;
};
const Login: NextPage<LoginProps> = ({ session }) => {
const t = useTranslate();
const {
colors: { leafcutterElectricBlue, lightGray },
typography: { h1, h4 },
} = useAppContext();
const buttonStyles = {
backgroundColor: lightGray,
borderRadius: 500,
width: "100%",
fontSize: "16px",
fontWeight: "bold",
};
return (
<>
<Head>
<title>Leafcutter: Login</title>
</Head>
<Grid container direction="row-reverse" sx={{ p: 3 }}>
<Grid item>
<LanguageSelect />
</Grid>
</Grid>
<Container maxWidth="md" sx={{ mt: 3, mb: 20 }}>
<Grid container spacing={2} direction="column" alignItems="center">
<Grid item>
<Box sx={{ maxWidth: 200 }}>
<Image src={LeafcutterLogoLarge} alt="" objectFit="fill" />
</Box>
</Grid>
<Grid item sx={{ textAlign: "center" }}>
<Box component="h1" sx={{ ...h1, color: leafcutterElectricBlue }}>
{t("welcomeToLeafcutter")}
</Box>
<Box component="h4" sx={{ ...h4, mt: 1 }}>
{t("welcomeToLeafcutterDescription")}
</Box>
</Grid>
<Grid item>
{!session ? (
<Grid
container
spacing={3}
direction="column"
alignItems="center"
sx={{ width: 450, mt: 1 }}
>
<Grid item sx={{ width: "100%" }}>
<IconButton
sx={buttonStyles}
onClick={() =>
signIn("google", {
callbackUrl: `${window.location.origin}/setup`,
})
}
>
<GoogleIcon sx={{ mr: 1 }} />
{`${t("signInWith")} Google`}
</IconButton>
</Grid>
<Grid item sx={{ width: "100%" }}>
<IconButton
sx={buttonStyles}
onClick={() =>
signIn("apple", {
callbackUrl: `${window.location.origin}/setup`,
})
}
>
<AppleIcon sx={{ mr: 1 }} />
{`${t("signInWith")} Apple`}
</IconButton>
</Grid>
<Grid item sx={{ mt: 2 }}>
<Box>
{t("dontHaveAccount")}{" "}
<Link href="mailto:info@digiresilience.org">
{t("requestAccessHere")}
</Link>
</Box>
</Grid>
</Grid>
) : null}
{session ? (
<>
<Box component="h4" sx={h4}>
{`${t("welcome")}, ${
session.user.name ?? session.user.email
}.`}
</Box>
<Link href="/">{t("goHome")}</Link>
</>
) : null}
</Grid>
</Grid>
</Container>
</>
);
};
export default Login;
export async function getServerSideProps(context: any) {
const session = (await getSession(context)) ?? null;
return {
props: { session },
};
}

16
apps/leafcutter/app/page.tsx Normal file
View file

@ -0,0 +1,16 @@
import { getSession } from "next-auth/react";
import { getUserVisualizations } from "@/app/_lib/opensearch";
import { getEmbedded } from "@/app/_lib/utils";
import { Home } from "@/app/_components/Home";
export default async function Page() {
const context = undefined;
const session = (await getSession(context)) ?? null;
const visualizations = await getUserVisualizations(
session?.user?.email ?? "none",
20
);
const embedded = false; // getEmbedded(context);
return <Home visualizations={visualizations} embedded={embedded} />;
}

106
apps/leafcutter/app/preview/[...visualizationID]/page.tsx Normal file
View file

@ -0,0 +1,106 @@
import { FC } from "react";
/* eslint-disable no-underscore-dangle */
// import { Client } from "@opensearch-project/opensearch";
import { RawDataViewer } from "@/app/_components/RawDataViewer";
import { VisualizationDetail } from "@/app/_components/VisualizationDetail";
// import { createVisualization } from "lib/opensearch";
interface PreviewProps {
visualization: any;
visualizationType: string;
data: any[];
}
const Preview: FC<PreviewProps> = ({
visualization,
visualizationType,
data,
}) =>
visualizationType === "rawData" ? (
<RawDataViewer rows={data} height={750} />
) : (
<VisualizationDetail {...visualization} />
);
export default Preview;
/*
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const {
visualizationID,
searchQuery,
visualizationType = "table",
} = context.query;
const node = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;
const client = new Client({
node,
ssl: {
rejectUnauthorized: false,
},
});
res.props.visualizationType = visualizationType as string;
if (visualizationType !== "rawData") {
await createVisualization({
id: visualizationID as string,
query: await JSON.parse(decodeURI(searchQuery as string)),
kind: visualizationType as string,
});
const rawResponse = await client.search({
index: ".kibana_1",
size: 200,
});
const response = rawResponse.body;
const hits = response.hits.hits.filter(
(hit) => hit._id.split(":")[1] === visualizationID[0]
);
const hit = hits[0];
res.props.visualization = {
id: hit._id.split(":")[1],
title: hit._source.visualization.title,
description: hit._source.visualization.description,
url: `/app/visualize?security_tenant=global#/edit/${
hit._id.split(":")[1]
}?embed=true`,
};
}
const rawQuery = await JSON.parse(decodeURI(searchQuery as string));
const query = {
bool: {
should: [],
must_not: [],
},
};
if (rawQuery.impactedTechnology.values.length > 0) {
rawQuery.impactedTechnology.values.forEach((value) => {
query.bool.should.push({
match: { technology: value },
});
});
}
console.log({ query });
const dataResponse = await client.search({
index: "demo_data",
size: 200,
body: { query },
});
console.log({ dataResponse });
res.props.data = dataResponse.body.hits.hits.map((hit) => ({
id: hit._id,
...hit._source,
}));
console.log({ data: res.props.data });
console.log(res.props.data[0]);
return res;
};
*/

47
apps/leafcutter/app/setup/page.tsx Normal file
View file

@ -0,0 +1,47 @@
import { useLayoutEffect } from "react";
import { NextPage } from "next";
import { useRouter } from "next/router";
import { Grid, CircularProgress } from "@mui/material";
import Iframe from "react-iframe";
import { useAppContext } from "@/app/_components/AppProvider";
const Setup: NextPage = () => {
const {
colors: { leafcutterElectricBlue },
} = useAppContext();
const router = useRouter();
useLayoutEffect(() => {
setTimeout(() => router.push("/"), 4000);
}, [router]);
return (
<Grid
sx={{ width: "100%", height: 700 }}
direction="row"
justifyContent="space-around"
alignItems="center"
alignContent="center"
>
<Grid
item
xs={12}
sx={{
width: "200px",
height: 700,
textAlign: "center",
margin: "0 auto",
pt: 30,
}}
>
<Iframe url="/app/home" height="1" width="1" frameBorder={0} />
<CircularProgress
size={80}
thickness={5}
sx={{ color: leafcutterElectricBlue }}
/>
</Grid>
</Grid>
);
};
export default Setup;

84
apps/leafcutter/app/trends/page.tsx Normal file
View file

@ -0,0 +1,84 @@
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import Head from "next/head";
import { Grid, Box } from "@mui/material";
import { useTranslate } from "react-polyglot";
import { getTrends } from "@/app/_lib/opensearch";
import { PageHeader } from "@/app/_components/PageHeader";
import { VisualizationCard } from "@/app/_components/VisualizationCard";
import { useAppContext } from "@/app/_components/AppProvider";
import { getEmbedded } from "@/app/_lib/utils";
type TrendsProps = {
visualizations: any;
embedded: boolean;
};
const Trends: NextPage<TrendsProps> = ({ visualizations, embedded }) => {
const t = useTranslate();
const {
colors: { cdrLinkOrange },
typography: { h1, h4, p },
} = useAppContext();
return (
<>
<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"
>
{visualizations.map((visualization: any, index: number) => (
<VisualizationCard
key={index}
id={visualization.id}
title={visualization.title}
description={visualization.description}
url={visualization.url}
/>
))}
</Grid>
</>
);
};
export default Trends;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const visualizations = await getTrends(25);
return { props: { visualizations, embedded: getEmbedded(context) } };
};

53
apps/leafcutter/app/visualizations/[...visualizationID]/page.tsx Normal file
View file

@ -0,0 +1,53 @@
/* eslint-disable no-underscore-dangle */
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { Client } from "@opensearch-project/opensearch";
import { VisualizationDetail } from "@/app/_components/VisualizationDetail";
import { getEmbedded } from "@/app/_lib/utils";
type VisualizationProps = {
visualization: any;
embedded: boolean;
};
const Visualization: NextPage<VisualizationProps> = ({
visualization,
embedded,
}) => <VisualizationDetail {...visualization} />;
export default Visualization;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const { visualizationID } = context.query;
const node = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;
const client = new Client({
node,
ssl: {
rejectUnauthorized: false,
},
});
const rawResponse = await client.search({
index: ".kibana_1",
size: 200,
});
const response = rawResponse.body;
const hits = response.hits.hits.filter(
// @ts-expect-error
(hit: any) => hit._id.split(":")[1] === visualizationID[0]
);
const hit = hits[0];
const visualization = {
id: hit._id.split(":")[1],
title: hit._source.visualization.title,
description: hit._source.visualization.description,
url: `/app/visualize?security_tenant=global#/edit/${
hit._id.split(":")[1]
}?embed=true`,
};
return { props: { visualization, embedded: getEmbedded(context) } };
};