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

Merge branch 'develop' into 'main'

Browse source 
Develop

See merge request digiresilience/link/link-stack!2
This commit is contained in:
Darren Clarke 2023-07-18 12:26:57 +00:00
commit 5c2187c7b7
302 changed files with 9897 additions and 10332 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitlab-ci.yml
View file

@ -1,4 +1,4 @@
image: node:20-bullseye-slim image: node:20-bookworm-slim
stages: stages:
- build - build
@ -11,6 +11,7 @@ build-all:
TURBO_TOKEN: $TURBO_TOKEN TURBO_TOKEN: $TURBO_TOKEN
TURBO_TEAM: $TURBO_TEAM TURBO_TEAM: $TURBO_TEAM
script: script:
- npm install npm@latest -g
- npm install -g turbo - npm install -g turbo
- npm ci - npm ci
- turbo build - turbo build

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"prettier.prettierPath": ""
}

2
apps/leafcutter/Dockerfile
View file

@ -15,7 +15,7 @@ WORKDIR ${APP_DIR}
COPY .gitignore .gitignore COPY .gitignore .gitignore
COPY --from=builder ${APP_DIR}/out/json/ . COPY --from=builder ${APP_DIR}/out/json/ .
COPY --from=builder ${APP_DIR}/out/package-lock.json ./package-lock.json COPY --from=builder ${APP_DIR}/out/package-lock.json ./package-lock.json
RUN npm ci --omit=dev RUN npm ci
COPY --from=builder ${APP_DIR}/out/full/ . COPY --from=builder ${APP_DIR}/out/full/ .
ARG LINK_EMBEDDED=true ARG LINK_EMBEDDED=true

26
apps/leafcutter/pages/login.tsx → apps/leafcutter/app/(login)/login/_components/Login.tsx
View file

@ -1,20 +1,21 @@
import Head from "next/head"; "use client";
import { NextPage } from "next";
import { FC } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/legacy/image"; import Image from "next/legacy/image";
import { Box, Grid, Container, IconButton } from "@mui/material"; import { Box, Grid, Container, IconButton } from "@mui/material";
import { Apple as AppleIcon, Google as GoogleIcon } from "@mui/icons-material"; import { Apple as AppleIcon, Google as GoogleIcon } from "@mui/icons-material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { LanguageSelect } from "components/LanguageSelect"; import { LanguageSelect } from "app/_components/LanguageSelect";
import LeafcutterLogoLarge from "images/leafcutter-logo-large.png"; import LeafcutterLogoLarge from "images/leafcutter-logo-large.png";
import { signIn, getSession } from "next-auth/react"; import { signIn } from "next-auth/react";
import { useAppContext } from "components/AppProvider"; import { useAppContext } from "app/_components/AppProvider";
type LoginProps = { type LoginProps = {
session: any; session: any;
}; };
const Login: NextPage<LoginProps> = ({ session }) => { export const Login: FC<LoginProps> = ({ session }) => {
const t = useTranslate(); const t = useTranslate();
const { const {
colors: { leafcutterElectricBlue, lightGray }, colors: { leafcutterElectricBlue, lightGray },
@ -30,9 +31,6 @@ const Login: NextPage<LoginProps> = ({ session }) => {
return ( return (
<> <>
<Head>
<title>Leafcutter: Login</title>
</Head>
<Grid container direction="row-reverse" sx={{ p: 3 }}> <Grid container direction="row-reverse" sx={{ p: 3 }}>
<Grid item> <Grid item>
<LanguageSelect /> <LanguageSelect />
@ -114,13 +112,3 @@ const Login: NextPage<LoginProps> = ({ session }) => {
</> </>
); );
}; };
export default Login;
export async function getServerSideProps(context: any) {
const session = (await getSession(context)) ?? null;
return {
props: { session },
};
}

16
apps/leafcutter/app/(login)/login/page.tsx Normal file
View file

@ -0,0 +1,16 @@
import { Metadata } from "next";
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { Login } from "./_components/Login";
export const metadata: Metadata = {
title: "Login",
};
export default async function Page() {
const session = await getServerSession(authOptions);
return <Login session={session} />;
}

34
apps/leafcutter/pages/about.tsx → apps/leafcutter/app/(main)/about/_components/About.tsx
View file

@ -1,27 +1,22 @@
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next"; "use client";
import { FC } from "react";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import Head from "next/head";
import Image from "next/legacy/image"; import Image from "next/legacy/image";
import Link from "next/link"; import Link from "next/link";
import { Grid, Container, Box, Button } from "@mui/material"; import { Grid, Container, Box, Button } from "@mui/material";
import { Layout } from "components/Layout"; import { useAppContext } from "app/_components/AppProvider";
import { useAppContext } from "components/AppProvider"; import { PageHeader } from "app/_components/PageHeader";
import { PageHeader } from "components/PageHeader"; import { AboutFeature } from "./AboutFeature";
import { AboutFeature } from "components/AboutFeature"; import { AboutBox } from "./AboutBox";
import { AboutBox } from "components/AboutBox";
import AbstractDiagram from "images/abstract-diagram.png"; import AbstractDiagram from "images/abstract-diagram.png";
import AboutHeader from "images/about-header.png"; import AboutHeader from "images/about-header.png";
import Globe from "images/globe.png"; import Globe from "images/globe.png";
import Controls from "images/controls.png"; import Controls from "images/controls.png";
import CommunityBackground from "images/community-background.png"; import CommunityBackground from "images/community-background.png";
import Bicycle from "images/bicycle.png"; import Bicycle from "images/bicycle.png";
import { getEmbedded } from "lib/utils";
type AboutProps = { export const About: FC = () => {
embedded: boolean;
};
const About: NextPage<AboutProps> = ({ embedded }) => {
const t = useTranslate(); const t = useTranslate();
const { const {
colors: { white, leafcutterElectricBlue, cdrLinkOrange }, colors: { white, leafcutterElectricBlue, cdrLinkOrange },
@ -29,10 +24,7 @@ const About: NextPage<AboutProps> = ({ embedded }) => {
} = useAppContext(); } = useAppContext();
return ( return (
<Layout embedded={embedded}> <>
<Head>
<title>Digital Threat Dashboard – Leafcutter</title>
</Head>
<PageHeader <PageHeader
backgroundColor={leafcutterElectricBlue} backgroundColor={leafcutterElectricBlue}
sx={{ sx={{
@ -166,12 +158,6 @@ const About: NextPage<AboutProps> = ({ embedded }) => {
</Link> </Link>
</Container> </Container>
</Box> </Box>
</Layout> </>
); );
}; };
export default About;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => ({ props: { embedded: getEmbedded(context) } });

4
apps/leafcutter/components/AboutBox.tsx → apps/leafcutter/app/(main)/about/_components/AboutBox.tsx
View file

@ -1,6 +1,8 @@
"use client";
import { FC, PropsWithChildren } from "react"; import { FC, PropsWithChildren } from "react";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "../../../_components/AppProvider";
type AboutBoxProps = PropsWithChildren<{ type AboutBoxProps = PropsWithChildren<{
backgroundColor: string; backgroundColor: string;

4
apps/leafcutter/components/AboutFeature.tsx → apps/leafcutter/app/(main)/about/_components/AboutFeature.tsx
View file

@ -1,8 +1,10 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import Image from "next/legacy/image"; import Image from "next/legacy/image";
import { Grid, Box, GridSize } from "@mui/material"; import { Grid, Box, GridSize } from "@mui/material";
import AboutDots from "images/about-dots.png"; import AboutDots from "images/about-dots.png";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "app/_components/AppProvider";
interface AboutFeatureProps { interface AboutFeatureProps {
title: string; title: string;

5
apps/leafcutter/app/(main)/about/page.tsx Normal file
View file

@ -0,0 +1,5 @@
import { About } from './_components/About';
export default function Page() {
return <About />;
}

40
apps/leafcutter/pages/create.tsx → apps/leafcutter/app/(main)/create/_components/Create.tsx
View file

@ -1,29 +1,26 @@
"use client";
import { FC, useEffect } from "react"; import { FC, useEffect } from "react";
import { GetServerSideProps, GetServerSidePropsContext } from "next";
import Head from "next/head";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { useRouter } from "next/router"; import { useRouter, usePathname } from "next/navigation";
import { Box, Grid } from "@mui/material"; import { Box, Grid } from "@mui/material";
import { useCookies } from "react-cookie"; import { useCookies } from "react-cookie";
import { getTemplates } from "lib/opensearch"; import { useAppContext } from "app/_components/AppProvider";
import { Layout } from "components/Layout"; import { PageHeader } from "app/_components/PageHeader";
import { useAppContext } from "components/AppProvider"; import { VisualizationBuilder } from "app/_components/VisualizationBuilder";
import { PageHeader } from "components/PageHeader";
import { VisualizationBuilder } from "components/VisualizationBuilder";
import { getEmbedded } from "lib/utils";
type CreateProps = { type CreateProps = {
templates: any; templates: any;
embedded: boolean;
}; };
const Create: FC<CreateProps> = ({ templates, embedded }) => { export const Create: FC<CreateProps> = ({ templates }) => {
const t = useTranslate(); const t = useTranslate();
const { const {
colors: { cdrLinkOrange }, colors: { cdrLinkOrange },
typography: { h1, h4 }, typography: { h1, h4 },
} = useAppContext(); } = useAppContext();
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
const cookieName = "searchIntroComplete"; const cookieName = "searchIntroComplete";
const [cookies, setCookie] = useCookies([cookieName]); const [cookies, setCookie] = useCookies([cookieName]);
const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0; const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0;
@ -31,16 +28,12 @@ const Create: FC<CreateProps> = ({ templates, embedded }) => {
useEffect(() => { useEffect(() => {
if (searchIntroComplete === 0) { if (searchIntroComplete === 0) {
setCookie(cookieName, `${1}`, { path: "/" }); setCookie(cookieName, `${1}`, { path: "/" });
router.push(`${router.pathname}?group=search&tooltip=1&checklist=1`); router.push(`${pathname}?group=search&tooltip=1&checklist=1`);
} }
}, [searchIntroComplete, router, setCookie]); }, [searchIntroComplete, router, setCookie]);
return ( return (
<Layout embedded={embedded}> <>
<Head>
<title>Digital Threat Dashboard – Leafcutter</title>
</Head>
<PageHeader backgroundColor={cdrLinkOrange}> <PageHeader backgroundColor={cdrLinkOrange}>
<Grid container direction="row" spacing={2} alignItems="center"> <Grid container direction="row" spacing={2} alignItems="center">
{/* <Grid item xs={2} sx={{ textAlign: "center" }}> {/* <Grid item xs={2} sx={{ textAlign: "center" }}>
@ -65,18 +58,7 @@ const Create: FC<CreateProps> = ({ templates, embedded }) => {
</Grid> </Grid>
</Grid> </Grid>
</PageHeader> </PageHeader>
<VisualizationBuilder templates={templates} /> <VisualizationBuilder templates={templates} />
</Layout> </>
); );
}; };
export default Create;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const templates = await getTemplates(100);
return { props: { templates, embedded: getEmbedded(context) } };
};

8
apps/leafcutter/app/(main)/create/page.tsx Normal file
View file

@ -0,0 +1,8 @@
import { getTemplates } from "app/_lib/opensearch";
import { Create } from "./_components/Create";
export default async function Page() {
const templates = await getTemplates(100);
return <Create templates={templates} />;
}

32
apps/leafcutter/pages/faq.tsx → apps/leafcutter/app/(main)/faq/_components/FAQ.tsx
View file

@ -1,19 +1,14 @@
import Head from "next/head"; "use client";
import { FC } from "react";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { Box, Grid } from "@mui/material"; import { Box, Grid } from "@mui/material";
import { Layout } from "components/Layout"; import { PageHeader } from "app/_components/PageHeader";
import { PageHeader } from "components/PageHeader"; import { Question } from "app/_components/Question";
import { Question } from "components/Question"; import { useAppContext } from "app/_components/AppProvider";
import { useAppContext } from "components/AppProvider";
import FaqHeader from "images/faq-header.svg"; import FaqHeader from "images/faq-header.svg";
import { getEmbedded } from "lib/utils";
type FAQProps = { export const FAQ: FC = () => {
embedded: boolean;
};
const FAQ: NextPage<FAQProps> = ({ embedded }) => {
const t = useTranslate(); const t = useTranslate();
const { const {
colors: { lavender }, colors: { lavender },
@ -70,10 +65,7 @@ const FAQ: NextPage<FAQProps> = ({ embedded }) => {
]; ];
return ( return (
<Layout embedded={embedded}> <>
<Head>
<title>Digital Threat Dashboard – Leafcutter</title>
</Head>
<PageHeader <PageHeader
backgroundColor={lavender} backgroundColor={lavender}
sx={{ sx={{
@ -105,12 +97,6 @@ const FAQ: NextPage<FAQProps> = ({ embedded }) => {
{questions.map((q: any, index: number) => ( {questions.map((q: any, index: number) => (
<Question key={index} question={q.question} answer={q.answer} /> <Question key={index} question={q.question} answer={q.answer} />
))} ))}
</Layout> </>
); );
}; };
export default FAQ;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => ({ props: { embedded: getEmbedded(context) } });

5
apps/leafcutter/app/(main)/faq/page.tsx Normal file
View file

@ -0,0 +1,5 @@
import { FAQ } from "./_components/FAQ";
export default function Page() {
return <FAQ />;
}

22
apps/leafcutter/app/(main)/layout.tsx Normal file
View file

@ -0,0 +1,22 @@
import { ReactNode } from "react";
import "app/_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 getConfig from "next/config";
// import { LicenseInfo } from "@mui/x-data-grid-pro";
import { InternalLayout } from "app/_components/InternalLayout";
import { headers } from 'next/headers'
type LayoutProps = {
children: ReactNode;
};
export default function Layout({ children }: LayoutProps) {
const allHeaders = headers();
const embedded = Boolean(allHeaders.get('x-leafcutter-embedded'));
return <InternalLayout embedded={embedded}>{children}</InternalLayout>;
}

23
apps/leafcutter/app/(main)/preview/[...visualizationID]/_components/Preview.tsx Normal file
View file

@ -0,0 +1,23 @@
"use client";
import { FC } from "react";
/* eslint-disable no-underscore-dangle */
import { RawDataViewer } from "app/_components/RawDataViewer";
import { VisualizationDetail } from "app/_components/VisualizationDetail";
interface PreviewProps {
visualization: any;
visualizationType: string;
data: any[];
}
export const Preview: FC<PreviewProps> = ({
visualization,
visualizationType,
data,
}) =>
visualizationType === "rawData" ? (
<RawDataViewer rows={data} height={750} />
) : (
<VisualizationDetail {...visualization} />
);

23
apps/leafcutter/pages/preview/[...visualizationID].tsx → apps/leafcutter/app/(main)/preview/[...visualizationID]/page.tsx
View file

@ -1,29 +1,12 @@
import { FC } from "react";
/* eslint-disable no-underscore-dangle */ /* eslint-disable no-underscore-dangle */
// import { Client } from "@opensearch-project/opensearch"; // import { Client } from "@opensearch-project/opensearch";
import { RawDataViewer } from "components/RawDataViewer"; import { Preview } from "./_components/Preview";
import { VisualizationDetail } from "components/VisualizationDetail";
// import { createVisualization } from "lib/opensearch"; // import { createVisualization } from "lib/opensearch";
interface PreviewProps { export default function Page() {
visualization: any; return <Preview visualization={undefined} visualizationType={""} data={[]}/>;
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 ( export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext context: GetServerSidePropsContext

10
apps/leafcutter/pages/setup.tsx → apps/leafcutter/app/(main)/setup/_components/Setup.tsx
View file

@ -1,11 +1,13 @@
"use client";
import { FC } from "react";
import { useLayoutEffect } from "react"; import { useLayoutEffect } from "react";
import { NextPage } from "next"; import { useRouter } from "next/navigation";
import { useRouter } from "next/router";
import { Grid, CircularProgress } from "@mui/material"; import { Grid, CircularProgress } from "@mui/material";
import Iframe from "react-iframe"; import Iframe from "react-iframe";
import { useAppContext } from "components/AppProvider"; import { useAppContext } from "app/_components/AppProvider";
const Setup: NextPage = () => { export const Setup: FC = () => {
const { const {
colors: { leafcutterElectricBlue }, colors: { leafcutterElectricBlue },
} = useAppContext(); } = useAppContext();

6
apps/leafcutter/app/(main)/setup/page.tsx Normal file
View file

@ -0,0 +1,6 @@
import { Setup } from './_components/Setup';
export default function Page() {
return <Setup />;
}

34
apps/leafcutter/pages/trends.tsx → apps/leafcutter/app/(main)/trends/_components/Trends.tsx
View file

@ -1,20 +1,17 @@
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next"; "use client";
import Head from "next/head";
import { FC } from "react";
import { Grid, Box } from "@mui/material"; import { Grid, Box } from "@mui/material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { Layout } from "components/Layout"; import { PageHeader } from "app/_components/PageHeader";
import { getTrends } from "lib/opensearch"; import { VisualizationCard } from "app/_components/VisualizationCard";
import { PageHeader } from "components/PageHeader"; import { useAppContext } from "app/_components/AppProvider";
import { VisualizationCard } from "components/VisualizationCard";
import { useAppContext } from "components/AppProvider";
import { getEmbedded } from "lib/utils";
type TrendsProps = { type TrendsProps = {
visualizations: any; visualizations: any;
embedded: boolean;
}; };
const Trends: NextPage<TrendsProps> = ({ visualizations, embedded }) => { export const Trends: FC<TrendsProps> = ({ visualizations }) => {
const t = useTranslate(); const t = useTranslate();
const { const {
colors: { cdrLinkOrange }, colors: { cdrLinkOrange },
@ -22,10 +19,7 @@ const Trends: NextPage<TrendsProps> = ({ visualizations, embedded }) => {
} = useAppContext(); } = useAppContext();
return ( return (
<Layout embedded={embedded}> <>
<Head>
<title>Digital Threat Dashboard – Leafcutter</title>
</Head>
<PageHeader backgroundColor={cdrLinkOrange}> <PageHeader backgroundColor={cdrLinkOrange}>
<Grid <Grid
container container
@ -73,16 +67,6 @@ const Trends: NextPage<TrendsProps> = ({ visualizations, embedded }) => {
/> />
))} ))}
</Grid> </Grid>
</Layout> </>
); );
}; };
export default Trends;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const visualizations = await getTrends(25);
return { props: { visualizations, embedded: getEmbedded(context) } };
};

8
apps/leafcutter/app/(main)/trends/page.tsx Normal file
View file

@ -0,0 +1,8 @@
import { getTrends } from "app/_lib/opensearch";
import { Trends } from "./_components/Trends";
export default async function Page() {
const visualizations = await getTrends(25);
return <Trends visualizations={visualizations} />;
}

46
apps/leafcutter/app/(main)/visualizations/[...visualizationID]/page.tsx Normal file
View file

@ -0,0 +1,46 @@
/* eslint-disable no-underscore-dangle */
import { Client } from "@opensearch-project/opensearch";
import { VisualizationDetail } from "app/_components/VisualizationDetail";
const getVisualization = async (visualizationID: string) => {
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(
(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 visualization;
};
type PageProps = {
params: {
visualizationID: string;
};
};
export default async function Page({ params: { visualizationID } }: PageProps) {
const visualization = await getVisualization(visualizationID);
return <VisualizationDetail {...visualization} editing={false} />;
}

2
apps/leafcutter/components/AccountButton.tsx → apps/leafcutter/app/_components/AccountButton.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import Image from "next/legacy/image"; import Image from "next/legacy/image";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";

4
apps/leafcutter/components/AppProvider.tsx → apps/leafcutter/app/_components/AppProvider.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { import {
FC, FC,
createContext, createContext,
@ -6,7 +8,7 @@ import {
useState, useState,
PropsWithChildren, PropsWithChildren,
} from "react"; } from "react";
import { colors, typography } from "styles/theme"; import { colors, typography } from "app/_styles/theme";
const basePath = process.env.GITLAB_CI const basePath = process.env.GITLAB_CI
? "/link/link-stack/apps/leafcutter" ? "/link/link-stack/apps/leafcutter"

2
apps/leafcutter/components/Button.tsx → apps/leafcutter/app/_components/Button.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import Link from "next/link"; import Link from "next/link";
import { Button as MUIButton } from "@mui/material"; import { Button as MUIButton } from "@mui/material";

2
apps/leafcutter/components/Footer.tsx → apps/leafcutter/app/_components/Footer.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import { Container, Grid, Box, Button } from "@mui/material"; import { Container, Grid, Box, Button } from "@mui/material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";

12
apps/leafcutter/components/GettingStartedDialog.tsx → apps/leafcutter/app/_components/GettingStartedDialog.tsx
View file

@ -1,7 +1,9 @@
"use client";
import { FC, useState } from "react"; import { FC, useState } from "react";
import { Dialog, Box, Grid, Checkbox, IconButton } from "@mui/material"; import { Dialog, Box, Grid, Checkbox, IconButton } from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material"; import { Close as CloseIcon } from "@mui/icons-material";
import { useRouter } from "next/router"; import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";
@ -60,9 +62,11 @@ export const GettingStartedDialog: FC = () => {
typography: { h4 }, typography: { h4 },
} = useAppContext(); } = useAppContext();
const t = useTranslate(); const t = useTranslate();
const [completedItems, setCompletedItems] = useState([] as any[]);
const router = useRouter(); const router = useRouter();
const open = router.query.tooltip?.toString() === "checklist"; const [completedItems, setCompletedItems] = useState([] as any[]);
const searchParams = useSearchParams();
const pathname = usePathname();
const open = searchParams.get("tooltip")?.toString() === "checklist";
const toggleCompletedItem = (item: any) => { const toggleCompletedItem = (item: any) => {
if (completedItems.includes(item)) { if (completedItems.includes(item)) {
setCompletedItems(completedItems.filter((i) => i !== item)); setCompletedItems(completedItems.filter((i) => i !== item));
@ -90,7 +94,7 @@ export const GettingStartedDialog: FC = () => {
<Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box> <Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box>
</Grid> </Grid>
<Grid item> <Grid item>
<IconButton onClick={() => router.push(router.pathname)}> <IconButton onClick={() => router.push(pathname)}>
<CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} /> <CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} />
</IconButton> </IconButton>
</Grid> </Grid>

7
apps/leafcutter/components/HelpButton.tsx → apps/leafcutter/app/_components/HelpButton.tsx
View file

@ -1,18 +1,21 @@
"use client";
import { FC, useState } from "react"; import { FC, useState } from "react";
import { useRouter } from "next/router"; import { useRouter, usePathname } from "next/navigation";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material"; import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";
export const HelpButton: FC = () => { export const HelpButton: FC = () => {
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
const [helpActive, setHelpActive] = useState(false); const [helpActive, setHelpActive] = useState(false);
const { const {
colors: { leafcutterElectricBlue }, colors: { leafcutterElectricBlue },
} = useAppContext(); } = useAppContext();
const onClick = () => { const onClick = () => {
if (helpActive) { if (helpActive) {
router.push(router.pathname); router.push(pathname);
} else { } else {
router.push("/?tooltip=welcome"); router.push("/?tooltip=welcome");
} }

51
apps/leafcutter/pages/index.tsx → apps/leafcutter/app/_components/Home.tsx
View file

@ -1,31 +1,24 @@
import { useEffect } from "react"; "use client";
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { useRouter } from "next/router"; import { useEffect, FC } from "react";
import { getSession } from "next-auth/react"; import { useRouter, usePathname } from "next/navigation";
import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import { Grid, Button } from "@mui/material"; import { Grid, Button } from "@mui/material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { useCookies } from "react-cookie"; import { useCookies } from "react-cookie";
import { Layout } from "components/Layout"; import { Welcome } from "app/_components/Welcome";
import { getUserVisualizations } from "lib/opensearch"; import { WelcomeDialog } from "app/_components/WelcomeDialog";
import { Welcome } from "components/Welcome"; import { VisualizationCard } from "app/_components/VisualizationCard";
import { WelcomeDialog } from "components/WelcomeDialog"; import { useAppContext } from "app/_components/AppProvider";
import { VisualizationCard } from "components/VisualizationCard";
import { useAppContext } from "components/AppProvider";
import { getEmbedded } from "lib/utils";
type MyVisualizationsProps = { type HomeProps = {
visualizations: any; visualizations: any;
embedded: boolean;
}; };
const MyVisualizations: NextPage<MyVisualizationsProps> = ({ export const Home: FC<HomeProps> = ({ visualizations }) => {
visualizations,
embedded,
}) => {
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
const cookieName = "homeIntroComplete"; const cookieName = "homeIntroComplete";
const [cookies, setCookie] = useCookies([cookieName]); const [cookies, setCookie] = useCookies([cookieName]);
const t = useTranslate(); const t = useTranslate();
@ -38,15 +31,12 @@ const MyVisualizations: NextPage<MyVisualizationsProps> = ({
useEffect(() => { useEffect(() => {
if (homeIntroComplete === 0) { if (homeIntroComplete === 0) {
setCookie(cookieName, `${1}`, { path: "/" }); setCookie(cookieName, `${1}`, { path: "/" });
router.push(`${router.pathname}?tooltip=welcome`); router.push(`${pathname}?tooltip=welcome`);
} }
}, [homeIntroComplete, router, setCookie]); }, [homeIntroComplete, router, setCookie]);
return ( return (
<Layout embedded={embedded}> <>
<Head>
<title>Digital Threat Dashboard – Leafcutter</title>
</Head>
<Welcome /> <Welcome />
<Grid <Grid
container container
@ -105,19 +95,6 @@ const MyVisualizations: NextPage<MyVisualizationsProps> = ({
))} ))}
</Grid> </Grid>
<WelcomeDialog /> <WelcomeDialog />
</Layout> </>
); );
}; };
export default MyVisualizations;
export const getServerSideProps: GetServerSideProps = async (
context: GetServerSidePropsContext
) => {
const session = (await getSession(context)) ?? null;
const visualizations = await getUserVisualizations(
session?.user?.email ?? "none",
20
);
return { props: { visualizations, embedded: getEmbedded(context) } };
};

4
apps/leafcutter/components/Layout.tsx → apps/leafcutter/app/_components/InternalLayout.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, PropsWithChildren } from "react"; import { FC, PropsWithChildren } from "react";
import getConfig from "next/config"; import getConfig from "next/config";
import { Grid, Container } from "@mui/material"; import { Grid, Container } from "@mui/material";
@ -13,7 +15,7 @@ type LayoutProps = PropsWithChildren<{
embedded?: boolean; embedded?: boolean;
}>; }>;
export const Layout: FC<LayoutProps> = ({ export const InternalLayout: FC<LayoutProps> = ({
embedded = false, embedded = false,
children, children,
}: any) => { }: any) => {

9
apps/leafcutter/components/LanguageSelect.tsx → apps/leafcutter/app/_components/LanguageSelect.tsx
View file

@ -1,4 +1,6 @@
import { useRouter } from "next/router"; "use client";
import { useRouter } from "next/navigation";
import { IconButton, Menu, MenuItem, Box } from "@mui/material"; import { IconButton, Menu, MenuItem, Box } from "@mui/material";
import { KeyboardArrowDown as KeyboardArrowDownIcon } from "@mui/icons-material"; import { KeyboardArrowDown as KeyboardArrowDownIcon } from "@mui/icons-material";
import { import {
@ -15,6 +17,7 @@ export const LanguageSelect = () => {
} = useAppContext(); } = useAppContext();
const router = useRouter(); const router = useRouter();
const locales: any = { en: "English", fr: "Français" }; const locales: any = { en: "English", fr: "Français" };
const locale = "en";
const popupState = usePopupState({ variant: "popover", popupId: "language" }); const popupState = usePopupState({ variant: "popover", popupId: "language" });
return ( return (
@ -36,7 +39,7 @@ export const LanguageSelect = () => {
}, },
}} }}
> >
{locales[router.locale as any] ?? locales.en} {locales[locale as any] ?? locales.en}
<KeyboardArrowDownIcon /> <KeyboardArrowDownIcon />
</IconButton> </IconButton>
<Menu {...bindMenu(popupState)}> <Menu {...bindMenu(popupState)}>
@ -44,7 +47,7 @@ export const LanguageSelect = () => {
<MenuItem <MenuItem
key={locale} key={locale}
onClick={() => { onClick={() => {
router.push(router.route, router.route, { locale }); // router.push(router.route, router.route, { locale });
popupState.close(); popupState.close();
}} }}
> >

2
apps/leafcutter/components/LiveDataViewer.tsx → apps/leafcutter/app/_components/LiveDataViewer.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useEffect, useState } from "react"; import { FC, useEffect, useState } from "react";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";
import { RawDataViewer } from "./RawDataViewer"; import { RawDataViewer } from "./RawDataViewer";

2
apps/leafcutter/components/MetricSelectCard.tsx → apps/leafcutter/app/_components/MetricSelectCard.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useState } from "react"; import { FC, useState } from "react";
import { Card, Grid } from "@mui/material"; import { Card, Grid } from "@mui/material";
import { import {

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

@ -0,0 +1,49 @@
"use client";
/* 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";
import { LocalizationProvider } from "@mui/x-date-pickers-pro";
import { AppProvider } from "app/_components/AppProvider";
import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
import en from "app/_locales/en.json";
import fr from "app/_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 "app/_styles/global.css";
import { LicenseInfo } from "@mui/x-date-pickers-pro";
LicenseInfo.setLicenseKey(
"7c9bf25d9e240f76e77cbf7d2ba58a23Tz02NjU4OCxFPTE3MTU4NjIzMzQ2ODgsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI="
);
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>
);
};

2
apps/leafcutter/components/OpenSearchWrapper.tsx → apps/leafcutter/app/_components/OpenSearchWrapper.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import Iframe from "react-iframe"; import Iframe from "react-iframe";
import { Box } from "@mui/material"; import { Box } from "@mui/material";

2
apps/leafcutter/components/PageHeader.tsx → apps/leafcutter/app/_components/PageHeader.tsx
View file

@ -1,3 +1,5 @@
"use client";
/* eslint-disable react/require-default-props */ /* eslint-disable react/require-default-props */
import { FC, PropsWithChildren } from "react"; import { FC, PropsWithChildren } from "react";
import { Box } from "@mui/material"; import { Box } from "@mui/material";

6
apps/leafcutter/components/QueryBuilder.tsx → apps/leafcutter/app/_components/QueryBuilder.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useState } from "react"; import { FC, useState } from "react";
import { import {
Box, Box,
@ -15,14 +17,14 @@ import {
Group as GroupIcon, Group as GroupIcon,
} from "@mui/icons-material"; } from "@mui/icons-material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import taxonomy from "config/taxonomy.json"; import taxonomy from "app/_config/taxonomy.json";
import { QueryBuilderSection } from "./QueryBuilderSection"; import { QueryBuilderSection } from "./QueryBuilderSection";
import { QueryListSelector } from "./QueryListSelector"; import { QueryListSelector } from "./QueryListSelector";
import { QueryDateRangeSelector } from "./QueryDateRangeSelector"; import { QueryDateRangeSelector } from "./QueryDateRangeSelector";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";
import { Tooltip } from "./Tooltip"; import { Tooltip } from "./Tooltip";
interface QueryBuilderProps { } interface QueryBuilderProps {}
export const QueryBuilder: FC<QueryBuilderProps> = () => { export const QueryBuilder: FC<QueryBuilderProps> = () => {
const t = useTranslate(); const t = useTranslate();

2
apps/leafcutter/components/QueryBuilderSection.tsx → apps/leafcutter/app/_components/QueryBuilderSection.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, PropsWithChildren, useState } from "react"; import { FC, PropsWithChildren, useState } from "react";
import { import {
Box, Box,

4
apps/leafcutter/components/QueryDateRangeSelector.tsx → apps/leafcutter/app/_components/QueryDateRangeSelector.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useState, useEffect } from "react"; import { FC, useState, useEffect } from "react";
import { Box, Grid, TextField, Select, MenuItem } from "@mui/material"; import { Box, Grid, TextField, Select, MenuItem } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers-pro"; import { DatePicker } from "@mui/x-date-pickers-pro";
@ -90,7 +92,7 @@ export const QueryDateRangeSelector: FC<QueryDateRangeSelectorProps> = () => {
endDate: { values: [date] }, endDate: { values: [date] },
}); });
}} }}
// @ts-ignore // @ts-ignore
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}

2
apps/leafcutter/components/QueryListSelector.tsx → apps/leafcutter/app/_components/QueryListSelector.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useState, useEffect } from "react"; import { FC, useState, useEffect } from "react";
import { Box, Grid, Tooltip } from "@mui/material"; import { Box, Grid, Tooltip } from "@mui/material";
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro"; import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";

6
apps/leafcutter/components/QueryText.tsx → apps/leafcutter/app/_components/QueryText.tsx
View file

@ -1,8 +1,10 @@
"use client";
import { FC, useState, useEffect } from "react"; import { FC, useState, useEffect } from "react";
import { Box, Grid } from "@mui/material"; import { Box, Grid } from "@mui/material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import taxonomy from "config/taxonomy.json"; import taxonomy from "app/_config/taxonomy.json";
import { colors } from "styles/theme"; import { colors } from "app/_styles/theme";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";
export const QueryText: FC = () => { export const QueryText: FC = () => {

2
apps/leafcutter/components/Question.tsx → apps/leafcutter/app/_components/Question.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useState } from "react"; import { FC, useState } from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import { import {

2
apps/leafcutter/components/RawDataViewer.tsx → apps/leafcutter/app/_components/RawDataViewer.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import { Box, Grid } from "@mui/material"; import { Box, Grid } from "@mui/material";
import { DataGridPro } from "@mui/x-data-grid-pro"; import { DataGridPro } from "@mui/x-data-grid-pro";

12
apps/leafcutter/components/Sidebar.tsx → apps/leafcutter/app/_components/Sidebar.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import DashboardMenuIcon from "images/dashboard-menu.png"; import DashboardMenuIcon from "images/dashboard-menu.png";
import AboutMenuIcon from "images/about-menu.png"; import AboutMenuIcon from "images/about-menu.png";
@ -16,10 +18,10 @@ import {
Drawer, Drawer,
} from "@mui/material"; } from "@mui/material";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { usePathname } from "next/navigation";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { useAppContext } from "components/AppProvider"; import { useAppContext } from "app/_components/AppProvider";
import { Tooltip } from "components/Tooltip"; import { Tooltip } from "app/_components/Tooltip";
// import { ArrowCircleRight as ArrowCircleRightIcon } from "@mui/icons-material"; // import { ArrowCircleRight as ArrowCircleRightIcon } from "@mui/icons-material";
const MenuItem = ({ const MenuItem = ({
@ -99,8 +101,8 @@ interface SidebarProps {
export const Sidebar: FC<SidebarProps> = ({ open }) => { export const Sidebar: FC<SidebarProps> = ({ open }) => {
const t = useTranslate(); const t = useTranslate();
const router = useRouter(); const pathname = usePathname();
const section = router.pathname.split("/")[1]; const section = pathname.split("/")[1];
const { const {
colors: { white }, // leafcutterElectricBlue, leafcutterLightBlue, colors: { white }, // leafcutterElectricBlue, leafcutterLightBlue,
} = useAppContext(); } = useAppContext();

12
apps/leafcutter/components/Tooltip.tsx → apps/leafcutter/app/_components/Tooltip.tsx
View file

@ -1,6 +1,8 @@
"use client";
/* eslint-disable react/require-default-props */ /* eslint-disable react/require-default-props */
import { FC } from "react"; import { FC } from "react";
import { useRouter } from "next/router"; import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { import {
Box, Box,
Grid, Grid,
@ -38,7 +40,9 @@ export const Tooltip: FC<TooltipProps> = ({
colors: { white, leafcutterElectricBlue, almostBlack }, colors: { white, leafcutterElectricBlue, almostBlack },
} = useAppContext(); } = useAppContext();
const router = useRouter(); const router = useRouter();
const activeTooltip = router.query.tooltip?.toString(); const pathname = usePathname();
const searchParams = useSearchParams();
const activeTooltip = searchParams.get('tooltip')?.toString();
const open = activeTooltip === tooltipID; const open = activeTooltip === tooltipID;
const showNavigation = true; const showNavigation = true;
@ -49,7 +53,7 @@ export const Tooltip: FC<TooltipProps> = ({
<Grid container direction="column"> <Grid container direction="column">
<Grid item container direction="row-reverse"> <Grid item container direction="row-reverse">
<Grid item> <Grid item>
<IconButton onClick={() => router.push(router.pathname)}> <IconButton onClick={() => router.push(pathname)}>
<CloseIcon <CloseIcon
sx={{ sx={{
color: leafcutterElectricBlue, color: leafcutterElectricBlue,
@ -123,7 +127,7 @@ export const Tooltip: FC<TooltipProps> = ({
color: leafcutterElectricBlue, color: leafcutterElectricBlue,
textTransform: "none", textTransform: "none",
}} }}
onClick={() => router.push(router.pathname)} onClick={() => router.push(pathname)}
> >
{t("done")} {t("done")}
</Button> </Button>

8
apps/leafcutter/components/TopNav.tsx → apps/leafcutter/app/_components/TopNav.tsx
View file

@ -1,12 +1,14 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/legacy/image"; import Image from "next/legacy/image";
import { AppBar, Grid, Box } from "@mui/material"; import { AppBar, Grid, Box } from "@mui/material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import LeafcutterLogo from "images/leafcutter-logo.png"; import LeafcutterLogo from "images/leafcutter-logo.png";
import { AccountButton } from "components/AccountButton"; import { AccountButton } from "app/_components/AccountButton";
import { HelpButton } from "components/HelpButton"; import { HelpButton } from "app/_components/HelpButton";
import { Tooltip } from "components/Tooltip"; import { Tooltip } from "app/_components/Tooltip";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";
// import { LanguageSelect } from "./LanguageSelect"; // import { LanguageSelect } from "./LanguageSelect";

12
apps/leafcutter/components/VisualizationBuilder.tsx → apps/leafcutter/app/_components/VisualizationBuilder.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useState, useEffect } from "react"; import { FC, useState, useEffect } from "react";
import { import {
Box, Box,
@ -23,11 +25,11 @@ import {
RemoveCircle as RemoveCircleIcon, RemoveCircle as RemoveCircleIcon,
} from "@mui/icons-material"; } from "@mui/icons-material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { QueryBuilder } from "components/QueryBuilder"; import { QueryBuilder } from "app/_components/QueryBuilder";
import { QueryText } from "components/QueryText"; import { QueryText } from "app/_components/QueryText";
import { LiveDataViewer } from "components/LiveDataViewer"; import { LiveDataViewer } from "app/_components/LiveDataViewer";
import { Tooltip } from "components/Tooltip"; import { Tooltip } from "app/_components/Tooltip";
import visualizationMap from "config/visualizationMap.json"; import visualizationMap from "app/_config/visualizationMap.json";
import { VisualizationSelectCard } from "./VisualizationSelectCard"; import { VisualizationSelectCard } from "./VisualizationSelectCard";
import { MetricSelectCard } from "./MetricSelectCard"; import { MetricSelectCard } from "./MetricSelectCard";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";

6
apps/leafcutter/components/VisualizationCard.tsx → apps/leafcutter/app/_components/VisualizationCard.tsx
View file

@ -1,8 +1,10 @@
"use client";
import { FC, useState } from "react"; import { FC, useState } from "react";
import { Grid, Card, Box } from "@mui/material"; import { Grid, Card, Box } from "@mui/material";
import Iframe from "react-iframe"; import Iframe from "react-iframe";
import { useAppContext } from "components/AppProvider"; import { useAppContext } from "app/_components/AppProvider";
import { VisualizationDetailDialog } from "components/VisualizationDetailDialog"; import { VisualizationDetailDialog } from "app/_components/VisualizationDetailDialog";
interface VisualizationCardProps { interface VisualizationCardProps {
id: string; id: string;

6
apps/leafcutter/components/VisualizationDetail.tsx → apps/leafcutter/app/_components/VisualizationDetail.tsx
View file

@ -1,8 +1,10 @@
"use client";
import { FC } from "react"; import { FC } from "react";
// import Link from "next/link"; // import Link from "next/link";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import Iframe from "react-iframe"; import Iframe from "react-iframe";
import { useAppContext } from "components/AppProvider"; import { useAppContext } from "app/_components/AppProvider";
interface VisualizationDetailProps { interface VisualizationDetailProps {
id: string; id: string;
@ -24,7 +26,7 @@ export const VisualizationDetail: FC<VisualizationDetailProps> = ({
typography: { h4, p }, typography: { h4, p },
} = useAppContext(); } = 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))`; 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))`;
console.log({ finalURL });
return ( return (
<Box key={id}> <Box key={id}>
{!editing ? ( {!editing ? (

4
apps/leafcutter/components/VisualizationDetailDialog.tsx → apps/leafcutter/app/_components/VisualizationDetailDialog.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC, useState } from "react"; import { FC, useState } from "react";
// import Link from "next/link"; // import Link from "next/link";
import { import {
@ -9,7 +11,7 @@ import {
TextField, TextField,
} from "@mui/material"; } from "@mui/material";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
import { useAppContext } from "components/AppProvider"; import { useAppContext } from "app/_components/AppProvider";
import { VisualizationDetail } from "./VisualizationDetail"; import { VisualizationDetail } from "./VisualizationDetail";
interface VisualizationDetailDialogProps { interface VisualizationDetailDialogProps {

2
apps/leafcutter/components/VisualizationSelectCard.tsx → apps/leafcutter/app/_components/VisualizationSelectCard.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import Image from "next/legacy/image"; import Image from "next/legacy/image";
import { Card, Grid } from "@mui/material"; import { Card, Grid } from "@mui/material";

5
apps/leafcutter/components/Welcome.tsx → apps/leafcutter/app/_components/Welcome.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { Box, Grid } from "@mui/material"; import { Box, Grid } from "@mui/material";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { useTranslate } from "react-polyglot"; import { useTranslate } from "react-polyglot";
@ -6,9 +8,12 @@ import { useAppContext } from "./AppProvider";
export const Welcome = () => { export const Welcome = () => {
const t = useTranslate(); const t = useTranslate();
const { data: session } = useSession(); const { data: session } = useSession();
/*
const { const {
user: { name }, user: { name },
} = session as any; } = session as any;
*/
const name = "Test User";
const { const {
colors: { white, leafcutterElectricBlue }, colors: { white, leafcutterElectricBlue },
typography: { h1, h4, p }, typography: { h1, h4, p },

7
apps/leafcutter/components/WelcomeDialog.tsx → apps/leafcutter/app/_components/WelcomeDialog.tsx
View file

@ -1,5 +1,7 @@
"use client";
import { Box, Grid, Dialog, Button } from "@mui/material"; import { Box, Grid, Dialog, Button } from "@mui/material";
import { useRouter } from "next/router"; import { useRouter, useSearchParams } from "next/navigation";
// import { useSession } from "next-auth/react"; // import { useSession } from "next-auth/react";
// import { useTranslate } from "react-polyglot"; // import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider"; import { useAppContext } from "./AppProvider";
@ -7,13 +9,14 @@ import { useAppContext } from "./AppProvider";
export const WelcomeDialog = () => { export const WelcomeDialog = () => {
// const t = useTranslate(); // const t = useTranslate();
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams();
// const { data: session } = useSession(); // const { data: session } = useSession();
// const { user } = session; // const { user } = session;
const { const {
colors: { white, leafcutterElectricBlue }, colors: { white, leafcutterElectricBlue },
typography: { h1, h6, p }, typography: { h1, h6, p },
} = useAppContext(); } = useAppContext();
const activeTooltip = router.query.tooltip?.toString(); const activeTooltip = searchParams.get('tooltip')?.toString();
const open = activeTooltip === "welcome"; const open = activeTooltip === "welcome";
return ( return (

0
apps/leafcutter/config/taxonomy.json → apps/leafcutter/app/_config/taxonomy.json
View file

0
apps/leafcutter/config/unRegions.json → apps/leafcutter/app/_config/unRegions.json
View file

0
apps/leafcutter/config/visualizationMap.json → apps/leafcutter/app/_config/visualizationMap.json
View file

0
apps/leafcutter/config/visualizations/dataTable.json → apps/leafcutter/app/_config/visualizations/dataTable.json
View file

0
apps/leafcutter/config/visualizations/horizontalBar.json → apps/leafcutter/app/_config/visualizations/horizontalBar.json
View file

0
apps/leafcutter/config/visualizations/horizontalBarStacked.json → apps/leafcutter/app/_config/visualizations/horizontalBarStacked.json
View file

0
apps/leafcutter/config/visualizations/line.json → apps/leafcutter/app/_config/visualizations/line.json
View file

0
apps/leafcutter/config/visualizations/lineStacked.json → apps/leafcutter/app/_config/visualizations/lineStacked.json
View file

0
apps/leafcutter/config/visualizations/metric.json → apps/leafcutter/app/_config/visualizations/metric.json
View file

0
apps/leafcutter/config/visualizations/pieDonut.json → apps/leafcutter/app/_config/visualizations/pieDonut.json
View file

0
apps/leafcutter/config/visualizations/tagCloud.json → apps/leafcutter/app/_config/visualizations/tagCloud.json
View file

0
apps/leafcutter/config/visualizations/verticalBar.json → apps/leafcutter/app/_config/visualizations/verticalBar.json
View file

0
apps/leafcutter/config/visualizations/verticalBarStacked.json → apps/leafcutter/app/_config/visualizations/verticalBarStacked.json
View file

6
apps/leafcutter/pages/api/auth/[...nextauth].ts → apps/leafcutter/app/_lib/auth.ts
View file

@ -1,8 +1,8 @@
import NextAuth from "next-auth"; import type { NextAuthOptions } from "next-auth";
import Google from "next-auth/providers/google"; import Google from "next-auth/providers/google";
import Apple from "next-auth/providers/apple"; import Apple from "next-auth/providers/apple";
export default NextAuth({ export const authOptions: NextAuthOptions = {
providers: [ providers: [
Google({ Google({
clientId: process.env.GOOGLE_CLIENT_ID ?? "", clientId: process.env.GOOGLE_CLIENT_ID ?? "",
@ -14,4 +14,4 @@ export default NextAuth({
}), }),
], ],
secret: process.env.NEXTAUTH_SECRET, secret: process.env.NEXTAUTH_SECRET,
}); };

12
apps/leafcutter/lib/opensearch.ts → apps/leafcutter/app/_lib/opensearch.ts
View file

@ -8,10 +8,16 @@ const globalIndex = ".kibana_1";
const dataIndexName = "sample_tagged_tickets"; const dataIndexName = "sample_tagged_tickets";
const userMetadataIndexName = "user_metadata"; const userMetadataIndexName = "user_metadata";
const baseURL = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`; // const baseURL = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;
const baseURL = `https://localhost:9200`;
const createClient = () => new Client({ const createClient = () => new Client({
node: baseURL, node: baseURL,
auth: {
username: process.env.OPENSEARCH_USERNAME!,
password: process.env.OPENSEARCH_PASSWORD!,
},
ssl: { ssl: {
rejectUnauthorized: false, rejectUnauthorized: false,
}, },
@ -532,6 +538,7 @@ export const getTrends = async (limit: number) => {
export const getTemplates = async (limit: number) => { export const getTemplates = async (limit: number) => {
const client = createClient(); const client = createClient();
const query = { const query = {
query: { query: {
bool: { bool: {
@ -546,11 +553,14 @@ export const getTemplates = async (limit: number) => {
}, },
}, },
}; };
const rawResponse = await client.search({ const rawResponse = await client.search({
index: globalIndex, index: globalIndex,
size: limit, size: limit,
body: query, body: query,
}); });
const response = rawResponse.body; const response = rawResponse.body;
const { const {
hits: { hits }, hits: { hits },

0
apps/leafcutter/locales/en.json → apps/leafcutter/app/_locales/en.json
View file

0
apps/leafcutter/locales/fr.json → apps/leafcutter/app/_locales/fr.json
View file

0
apps/leafcutter/styles/global.css → apps/leafcutter/app/_styles/global.css
View file

0
apps/leafcutter/styles/theme.ts → apps/leafcutter/app/_styles/theme.ts
View file

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

@ -0,0 +1,6 @@
import NextAuth from "next-auth";
import { authOptions } from "app/_lib/auth";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

0
apps/leafcutter/pages/api/proxy/[[...path]].ts → apps/leafcutter/app/api/proxy/[[...path]].ts
View file

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

@ -0,0 +1,22 @@
import { NextRequest, NextResponse } from "next/server";
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { getUserMetadata, saveUserMetadata } from "app/_lib/opensearch";
export const POST = async (req: NextRequest) => {
const session = await getServerSession(authOptions);
const { user: { email } }: any = session;
const { name, query } = await req.json();
const result = await getUserMetadata(email);
const { savedSearches } = result;
await saveUserMetadata(email, {
savedSearches: [...savedSearches, { name, query }]
});
const { savedSearches: updatedSavedSearches } = await getUserMetadata(email);
return NextResponse.json(updatedSavedSearches);
};

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

@ -0,0 +1,19 @@
import { NextRequest, NextResponse } from "next/server";
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { getUserMetadata, saveUserMetadata } from "app/_lib/opensearch";
export const POST = async (req: NextRequest) => {
const session = await getServerSession(authOptions);
const { user: { email } }: any = session;
const { name } = await req.json();
const { savedSearches } = await getUserMetadata(email);
const updatedSavedSearches = savedSearches.filter((search: any) => search.name !== name);
const result = await saveUserMetadata(email, { savedSearches: updatedSavedSearches });
return NextResponse.json({ result });
};

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

@ -0,0 +1,12 @@
import { NextResponse } from "next/server";
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { getUserMetadata } from "app/_lib/opensearch";
export const GET = async () => {
const session = await getServerSession(authOptions);
const { user: { email } }: any = session;
const { savedSearches } = await getUserMetadata(email);
return NextResponse.json(savedSearches);
};

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

@ -0,0 +1,9 @@
import { NextResponse } from "next/server";
import { getTrends } from "app/_lib/opensearch";
export const GET = async () => {
const results = await getTrends(5);
NextResponse.json(results);
};

15
apps/leafcutter/pages/api/upload/index.ts → apps/leafcutter/app/api/upload/index.ts
View file

@ -1,12 +1,13 @@
/* eslint-disable no-restricted-syntax */ /* eslint-disable no-restricted-syntax */
import { NextApiRequest, NextApiResponse } from "next"; import { NextRequest, NextResponse } from "next/server";
import { Client } from "@opensearch-project/opensearch"; import { Client } from "@opensearch-project/opensearch";
import { v4 as uuid } from "uuid"; import { v4 as uuid } from "uuid";
import taxonomy from "config/taxonomy.json"; import taxonomy from "app/_config/taxonomy.json";
import unRegions from "config/unRegions.json"; import unRegions from "app/_config/unRegions.json";
const handler = async (req: NextApiRequest, res: NextApiResponse) => { export const POST = async (req: NextRequest) => {
const { headers: { authorization }, body: { tickets } } = req; const { tickets } = await req.json();
const authorization = req.headers.get("authorization");
const baseURL = `https://${process.env.OPENSEARCH_URL}`; const baseURL = `https://${process.env.OPENSEARCH_URL}`;
const client = new Client({ const client = new Client({
node: baseURL, node: baseURL,
@ -48,7 +49,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
} }
const results = { succeeded, failed }; const results = { succeeded, failed };
return res.json(results);
return NextResponse.json(results);
}; };
export default handler;

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

@ -0,0 +1,20 @@
import { NextRequest, NextResponse } from "next/server";
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { createUserVisualization } from "app/_lib/opensearch";
export const POST = async (req: NextRequest) => {
const session = await getServerSession(authOptions);
const { user: { email } }: any = session;
const { visualizationID, title, description, query } = await req.json();
const id = await createUserVisualization({
email,
visualizationID,
title,
description,
query
});
return NextResponse.json({ id });
};

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

@ -0,0 +1,15 @@
import { NextRequest, NextResponse } from "next/server";
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { deleteUserVisualization } from "app/_lib/opensearch";
export const POST = async (req: NextRequest, res: NextResponse) => {
const session = await getServerSession(authOptions);
const { user: { email } }: any = session;
const { id } = await req.json();
await deleteUserVisualization(email as string, id);
return NextResponse.json({ id });
};

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

@ -0,0 +1,12 @@
import { NextRequest, NextResponse } from "next/server";
import { performQuery } from "app/_lib/opensearch";
export const GET = async (req: NextRequest) => {
const searchQuery = req.nextUrl.searchParams.get("searchQuery");
const rawQuery = await JSON.parse(decodeURI(searchQuery as string));
const results = await performQuery(rawQuery, 1000);
return NextResponse.json(results);
};

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

@ -0,0 +1,21 @@
import { NextRequest, NextResponse } from "next/server";
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { updateUserVisualization } from "app/_lib/opensearch";
export const POST = async (req: NextRequest) => {
const session = await getServerSession(authOptions);
const { user: { email } }: any = session;
const { id, title, description, query } = await req.json();
await updateUserVisualization({
email,
id,
title,
description,
query
});
return NextResponse.json({ id });
};

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

@ -0,0 +1,32 @@
import { ReactNode } from "react";
import { Metadata } from "next";
import "app/_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 getConfig from "next/config";
// import { LicenseInfo } from "@mui/x-data-grid-pro";
import { MultiProvider } from "app/_components/MultiProvider";
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>{children}</MultiProvider>
</body>
</html>
);
}

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

@ -0,0 +1,14 @@
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { getUserVisualizations } from "app/_lib/opensearch";
import { Home } from "app/_components/Home";
export default async function Page() {
const session = await getServerSession(authOptions);
const {
user: { email },
}: any = session;
const visualizations = await getUserVisualizations(email ?? "none", 20);
return <Home visualizations={visualizations} />;
}

5
apps/leafcutter/lib/createEmotionCache.ts
View file

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

4
apps/leafcutter/lib/utils.ts
View file

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

88
apps/leafcutter/middleware.ts
View file

@ -1,8 +1,57 @@
import { withAuth } from "next-auth/middleware"; import { NextResponse } from "next/server";
import { withAuth, NextRequestWithAuth } from "next-auth/middleware";
import getConfig from "next/config"; import getConfig from "next/config";
const rewriteURL = (request: NextRequestWithAuth, originBaseURL: string, destinationBaseURL: string, headers: any = {}) => {
if (request.nextUrl.protocol.startsWith('ws')) {
return NextResponse.next();
}
if (request.nextUrl.pathname.includes('/_next/static/development/')) {
return NextResponse.next();
}
const destinationURL = request.url.replace(originBaseURL, destinationBaseURL);
console.log(`Rewriting ${request.url} to ${destinationURL}`);
const requestHeaders = new Headers(request.headers);
for (const [key, value] of Object.entries(headers)) {
// @ts-ignore
requestHeaders.set(key, value);
}
requestHeaders.delete('connection');
// console.log({ finalHeaders: requestHeaders });
return NextResponse.rewrite(new URL(destinationURL), { request: { headers: requestHeaders } });
};
const checkRewrites = async (request: NextRequestWithAuth) => {
console.log({ currentURL: request.nextUrl.href });
const leafcutterBaseURL = process.env.LEAFCUTTER_URL ?? "http://localhost:3000";
const opensearchDashboardsURL = process.env.OPENSEARCH_URL ?? "http://localhost:5602";
if (request.nextUrl.pathname.startsWith('/proxy/opensearch')) {
console.log('proxying to zammad');
const { token } = request.nextauth;
const auth = `${token?.email?.toLowerCase()}:${process.env.OPENSEARCH_USER_PASSWORD}`;
const buff = Buffer.from(auth);
const base64data = buff.toString("base64");
const headers = {
'X-Proxy-User': token?.email?.toLowerCase(),
"X-Proxy-Roles": "leafcutter_user",
"Authorization": `Basic ${base64data}`
};
console.log({ headers });
return rewriteURL(request, `${leafcutterBaseURL}/proxy/opensearch`, opensearchDashboardsURL, headers);
}
};
export default withAuth( export default withAuth(
() => { }, checkRewrites,
{ {
pages: { pages: {
signIn: `/login`, signIn: `/login`,
@ -14,32 +63,21 @@ export default withAuth(
headers, headers,
} = req; } = req;
return true; // check login page
/* const parsedURL = new URL(url);
const { if (parsedURL.pathname.startsWith('/login')) {
publicRuntimeConfig: { embedded }, return true;
} = getConfig(); }
if (embedded) { // check session auth
return true; const authorizedDomains = ["redaranj.com", "digiresilience.org"];
} const userDomain = token?.email?.toLowerCase().split("@").pop() ?? "unauthorized.net";
// check login page if (authorizedDomains.includes(userDomain)) {
const parsedURL = new URL(url); return true;
if (parsedURL.pathname.startsWith('/login')) { }
return true;
}
// check session auth return false;
const authorizedDomains = ["redaranj.com", "digiresilience.org"];
const userDomain = token?.email?.toLowerCase().split("@").pop() ?? "unauthorized.net";
if (authorizedDomains.includes(userDomain)) {
return true;
}
return false;
*/
}, },
} }
} }

39
apps/leafcutter/next.config.js
View file

@ -1,14 +1,22 @@
const ContentSecurityPolicy = `
default-src 'self';
script-src 'self';
child-src example.com;
style-src 'self' example.com;
font-src 'self';
`;
module.exports = { module.exports = {
publicRuntimeConfig: { publicRuntimeConfig: {
embedded: true embedded: true
}, },/*
basePath: "/proxy/leafcutter", basePath: "/proxy/leafcutter",
assetPrefix: "/proxy/leafcutter", assetPrefix: "/proxy/leafcutter",
i18n: { i18n: {
locales: ["en", "fr"], locales: ["en", "fr"],
defaultLocale: "en", defaultLocale: "en",
}, },
*/
/* rewrites: async () => ({ /* rewrites: async () => ({
fallback: [ fallback: [
{ {
@ -17,4 +25,31 @@ module.exports = {
}, },
], ],
}) */ }) */
async headers() {
return [
{
source: '/:path*',
headers: [
/*
{
key: 'Content-Security-Policy',
value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
},
*/
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload'
},
{
key: 'X-XSS-Protection',
value: '1; mode=block'
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
}
],
},
]
}
}; };

39
apps/leafcutter/package.json
View file

@ -3,7 +3,7 @@
"version": "0.2.0", "version": "0.2.0",
"scripts": { "scripts": {
"dev": "next dev -p 3001", "dev": "next dev -p 3001",
"login": "aws sso login --profile cdr-leafcutter-dashboard-production", "login": "aws sso login --sso-session cdr",
"kubeconfig": "aws eks update-kubeconfig --name cdr-leafcutter-dashboard-cluster --profile cdr-leafcutter-dashboard-production", "kubeconfig": "aws eks update-kubeconfig --name cdr-leafcutter-dashboard-cluster --profile cdr-leafcutter-dashboard-production",
"fwd:opensearch": "kubectl port-forward opensearch-cluster-master-0 9200:9200 --namespace leafcutter", "fwd:opensearch": "kubectl port-forward opensearch-cluster-master-0 9200:9200 --namespace leafcutter",
"fwd:dashboards": "kubectl port-forward opensearch-dashboards-1-59854cdb9b-vgmtf 5602:5601 --namespace leafcutter", "fwd:dashboards": "kubectl port-forward opensearch-dashboards-1-59854cdb9b-vgmtf 5602:5601 --namespace leafcutter",
@ -17,19 +17,19 @@
"@emotion/react": "^11.11.1", "@emotion/react": "^11.11.1",
"@emotion/server": "^11.11.0", "@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.11.0",
"@fontsource/playfair-display": "^5.0.3", "@fontsource/playfair-display": "^5.0.5",
"@fontsource/poppins": "^5.0.3", "@fontsource/poppins": "^5.0.5",
"@fontsource/roboto": "^5.0.3", "@fontsource/roboto": "^5.0.5",
"@mui/icons-material": "^5", "@mui/icons-material": "^5",
"@mui/lab": "^5.0.0-alpha.134", "@mui/lab": "^5.0.0-alpha.136",
"@mui/material": "^5", "@mui/material": "^5",
"@mui/x-data-grid-pro": "^6.8.0", "@mui/x-data-grid-pro": "^6.10.0",
"@mui/x-date-pickers-pro": "^6.8.0", "@mui/x-date-pickers-pro": "^6.10.0",
"@opensearch-project/opensearch": "^2.0.0", "@opensearch-project/opensearch": "^2.3.0",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"http-proxy-middleware": "^2.0.6", "http-proxy-middleware": "^2.0.6",
"material-ui-popup-state": "^5.0.9", "material-ui-popup-state": "^5.0.9",
"next": "13.4.6", "next": "13.4.10",
"next-auth": "^4.22.1", "next-auth": "^4.22.1",
"next-http-proxy-middleware": "^1.2.5", "next-http-proxy-middleware": "^1.2.5",
"nodemailer": "^6.9.3", "nodemailer": "^6.9.3",
@ -40,24 +40,25 @@
"react-iframe": "^1.8.5", "react-iframe": "^1.8.5",
"react-markdown": "^8.0.7", "react-markdown": "^8.0.7",
"react-polyglot": "^0.7.2", "react-polyglot": "^0.7.2",
"sharp": "^0.32.1", "sharp": "^0.32.3",
"swr": "^2.1.5", "swr": "^2.2.0",
"tss-react": "^4.8.8",
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.22.5", "@babel/core": "^7.22.9",
"@types/react": "18.2.13", "@types/node": "^20.4.2",
"@types/node": "^20.3.1", "@types/react": "18.2.15",
"@types/uuid": "^9.0.2", "@types/uuid": "^9.0.2",
"babel-loader": "^9.1.2", "babel-loader": "^9.1.3",
"eslint": "^8.43.0", "eslint": "^8.45.0",
"eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "^13.4.6", "eslint-config-next": "^13.4.10",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5", "eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"typescript": "5.1.3" "typescript": "5.1.6"
} }
} }

63
apps/leafcutter/pages/_app.tsx
View file

@ -1,63 +0,0 @@
/* eslint-disable react/jsx-props-no-spreading */
import { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";
import { useRouter } from "next/router";
import Head from "next/head";
import { CssBaseline } from "@mui/material";
import { CacheProvider, EmotionCache } from "@emotion/react";
import { CookiesProvider } from "react-cookie";
import { I18n } from "react-polyglot";
import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers-pro";
import { AppProvider } from "components/AppProvider";
import createEmotionCache from "lib/createEmotionCache";
import Favicon from "images/favicon.ico";
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 clientSideEmotionCache: any = createEmotionCache();
const messages: any = { en, fr };
interface LeafcutterWebProps extends AppProps {
// eslint-disable-next-line react/require-default-props
emotionCache?: EmotionCache;
}
const LeafcutterWeb = (props: LeafcutterWebProps) => {
const { locale = "en" } = useRouter();
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<>
<Head>
<link rel="icon" type="image/png" href={Favicon.src} />
</Head>
<SessionProvider session={(pageProps as any).session}>
<CacheProvider value={emotionCache}>
<CookiesProvider>
<CssBaseline />
<AppProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<I18n locale={locale} messages={messages[locale]}>
<Component {...pageProps} />
</I18n>
</LocalizationProvider>
</AppProvider>
</CookiesProvider>
</CacheProvider>
</SessionProvider>
</>
);
};
export default LeafcutterWeb;

50
apps/leafcutter/pages/_document.tsx
View file

@ -1,50 +0,0 @@
// eslint-disable-next-line no-use-before-define
import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "lib/createEmotionCache";
export default class LeafcutterDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
LeafcutterDocument.getInitialProps = async (ctx): Promise<any> => {
const originalRenderPage = ctx.renderPage;
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache as any);
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: any) => (props: any) =>
<App emotionCache={cache} {...props} />,
});
const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={`${style.key} ${style.ids.join(" ")}`}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));
return {
...initialProps,
styles: [
...React.Children.toArray(initialProps.styles),
...emotionStyleTags,
],
};
};

33
apps/leafcutter/pages/api/searches/create.ts
View file

@ -1,33 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { getUserMetadata, saveUserMetadata } from "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, 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);
};
export default handler;

31
apps/leafcutter/pages/api/searches/delete.ts
View file

@ -1,31 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { getUserMetadata, saveUserMetadata } from "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/pages/api/searches/list.ts
View file

@ -1,25 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { getUserMetadata } from "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;

19
apps/leafcutter/pages/api/trends/recent.ts
View file

@ -1,19 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { getTrends } from "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 results = await getTrends(5);
return res.json(results)
};
export default handler;

32
apps/leafcutter/pages/api/visualizations/create.ts
View file

@ -1,32 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { createUserVisualization } from "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/pages/api/visualizations/delete.ts
View file

@ -1,26 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { deleteUserVisualization } from "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/pages/api/visualizations/query.ts
View file

@ -1,23 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { performQuery } from "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/pages/api/visualizations/update.ts
View file

@ -1,32 +0,0 @@
import { NextApiRequest, NextApiResponse } from "next";
import { getToken } from "next-auth/jwt";
import { updateUserVisualization } from "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;

62
apps/leafcutter/pages/visualizations/[...visualizationID].tsx
View file

@ -1,62 +0,0 @@
/* eslint-disable no-underscore-dangle */
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { Client } from "@opensearch-project/opensearch";
import Head from "next/head";
import { Layout } from "components/Layout";
import { VisualizationDetail } from "components/VisualizationDetail";
import { getEmbedded } from "lib/utils";
type VisualizationProps = {
visualization: any;
embedded: boolean;
};
const Visualization: NextPage<VisualizationProps> = ({
visualization,
embedded,
}) => (
<Layout embedded={embedded}>
<Head>
<title>Digital Threat Dashboard – Leafcutter</title>
</Head>
<VisualizationDetail {...visualization} />
</Layout>
);
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) } };
};

Some files were not shown because too many files have changed in this diff Show more