Skip to content

F
FMS_Project_Frontend
Commit 4ff55782 authored by ReemyHasan's avatar ReemyHasan
Browse files
Options

add SSE Component

parent 42afe629
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 248 deletions
packages/admin/pages/_app.tsx
View file @ 4ff55782
......@@ -11,66 +11,47 @@ import "@/../shared-library/globals.css";
import AuthContextProvider from "@/src/context/auth-context";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import websocket from "../src/features/web-socket";
import DataContext from "../src/context/trap-context";
import '../src/styles/tailwind.css';
import DataProvider from "../src/context/trap-context/provider"
import "../src/styles/tailwind.css";
import { useCookies } from "react-cookie";
const inter = Inter({ subsets: ["latin"] });
export default function App({ Component, pageProps }: AppProps) {
const router = useRouter();
const { t } = useTranslation(TranslationFiles.COMMON);
const [data, setData] = React.useState([]);
const [new_val, setNewVal] = React.useState(null);
const contextValue = React.useMemo(() => ({ data, setData, websocket,new_val,setNewVal }), [
const contextValue = React.useMemo(() => ({ data, setData }), [
data,
setData,
websocket,
new_val,
setNewVal
]);
const [cookies,setCookies,removeCookie] = useCookies([]);
// if (cookies["role"] !== "admin" && !router.pathname.startsWith("/user")) {
// router.push("/user/dashboard"); // Modify this URL to your desired access-denied page
// return null; // Prevent rendering the Component for unauthorized users
// }
const [cookies, setCookies, removeCookie] = useCookies([]);
useEffect(() => {
if (typeof window !== "undefined") {
const loader = document.getElementById("globalLoader");
if (loader) loader.remove();
}
}, []);
// useEffect(() => {
// if (!websocket) {
// return;
// }
// return () => {
// if (websocket) {
// websocket.close();
// }
// };
// }, []);
const removeCookieAfterOneHour = async () => {
const removeCookieAfterOneHour = async () => {
removeCookie("role", { path: "/", sameSite: true });
removeCookie("token", { path: "/", sameSite: true });
removeCookie("username", { path: "/", sameSite: true });
if (cookies["fetch"]) removeCookie("fetch", { path: "/", sameSite: true });
window.location.href = "/sign-in";
};
useEffect(() => {
const timeout = setTimeout(() => {
removeCookieAfterOneHour();
}, 360000 //000
const timeout = setTimeout(
() => {
removeCookieAfterOneHour();
},
360000 //000
);
return () => {
clearTimeout(timeout);
};
}, []);
return (
<Fragment>
<Head>
<title>{t("fms")}</title>
......@@ -86,11 +67,11 @@ export default function App({ Component, pageProps }: AppProps) {
},
}}
>
<DataContext.Provider value={contextValue}>
<AuthContextProvider >
<Component {...pageProps} />
</AuthContextProvider>
</DataContext.Provider>
<AuthContextProvider>
<DataProvider value={contextValue}>
<Component {...pageProps} />
</ DataProvider>
</AuthContextProvider>
</ANTDConfigProvider>
</main>
</Fragment>
......
packages/admin/pages/index.tsx
View file @ 4ff55782
import * as React from "react";
import { useEffect } from "react"; // Import useEffect
import AppLayout from "@/src/components/layout";
import { Fragment } from "react";
import Head from "next/head";
import { TranslationFiles } from "@/src/data/core";
import useTranslation from "next-translate/useTranslation";
import DashboardComponent from "@/src/features/dashboard";
import { useRouter } from "next/router";
import { useCookies } from "react-cookie";
import MainUtils from "@/src/utils/main";
......@@ -25,14 +22,12 @@ export default function Home() {
return (
<Fragment>
<Head>
<title>{t("dashboard")}</title>
<title>{t("fms")}</title>
</Head>
<AppLayout>
<main className={`app-main-container`}>
<div className={"page-header"}>{t("")}</div>
{t("Waiting")}
{t("waiting")}
</main>
</AppLayout>
</Fragment>
);
}
packages/admin/pages/traps/index.tsx
View file @ 4ff55782
import * as React from "react";
import { useState } from "react";
import Head from "next/head";
import AppLayout from "@/src/components/layout";
import { Fragment } from "react";
......@@ -8,7 +7,6 @@ import { TranslationFiles } from "@/src/data/core";
import ShowTraps from "@/src/features/show-traps";
export default function Traps() {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<Fragment>
<Head>
......
packages/admin/src/components/layout/components/header/app-notifications/index.tsx
View file @ 4ff55782
......@@ -24,14 +24,14 @@ const AppNotifications = ({ data, setData }: AppNotificationsProps) => {
</Menu.Item>
<List
className="notify-list scrollRow"
dataSource={data.slice(-3)}
renderItem={(item: any) => (
<List.Item>
<div className={`severity-${item.severity}`}>{item.severity}</div>
<div>{item.agentAddress}</div>
{/* Add more properties as required */}
</List.Item>
)}
// dataSource={data.slice(-3)}
// renderItem={(item: any) => (
// <List.Item>
// <div className={`severity-${item.severity}`}>{item.severity}</div>
// <div>{item.agentAddress}</div>
// {/* Add more properties as required */}
// </List.Item>
// )}
/>
<Row gutter={24}>
{" "}
......
packages/admin/src/components/layout/components/header/index.tsx
View file @ 4ff55782
import React, { useEffect, useContext,useRef } from "react";
import { Layout, Row, Col } from "antd";
import AppLanguageSwitcher from "./app-language-switcher";
import AppNotifications from "./app-notifications";
import UserInfo from "./user-info";
import MenuIcon from "@/src/components/assets/custom-ant-icons/menu-icon";
import DataContext from "../../../../context/trap-context";
// import DataContext from "../../../../context/trap-context";
const { Header } = Layout;
type AppHeaderProps = {
toggleCollapse: Function;
};
export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
const { data, setData, websocket, setNewVal } = useContext(DataContext);
useEffect(() => {
if (!websocket) {
return;
}
websocket.onmessage = function (event:any) {
const message = JSON.parse(event.data);
console.log(message);
if (message.new_val != null) {
const newData = message.new_val;
const transformedData = {
flag:'0',
id: newData.id,
timestamp: newData.timestamp,
agentAddress: newData.agentAddress,
severity: newData.severity,
specificTrap: newData.specificTrap,
genericTrap: newData.genericTrap,
variableBindings: newData.variableBindings,
};
setNewVal(transformedData);
setData((prevData: any) => [...prevData, newData]);
}
else{
setNewVal({id:message.old_val.id,flag:-1,});
}
};
// const { data, setData, websocket, setNewVal } = useContext(DataContext);
// useEffect(() => {
// if (!websocket) {
// return;
// }
// websocket.onmessage = function (event:any) {
// const message = JSON.parse(event.data);
// console.log(message);
// if (message.new_val != null) {
// const newData = message.new_val;
// const transformedData = {
// flag:'0',
// id: newData.id,
// timestamp: newData.timestamp,
// agentAddress: newData.agentAddress,
// severity: newData.severity,
// specificTrap: newData.specificTrap,
// genericTrap: newData.genericTrap,
// variableBindings: newData.variableBindings,
// };
// setNewVal(transformedData);
// setData((prevData: any) => [...prevData, newData]);
// }
// else{
// setNewVal({id:message.old_val.id,flag:-1,});
// }
// };
return () => {
// if (websocket) {
// websocket.close();
// }
};
}, []);
// return () => {
// // if (websocket) {
// // websocket.close();
// // }
// };
// }, []);
const openKibana = () => {
window.open("http://172.29.3.220:5601", "_blank");
};
......@@ -71,7 +70,7 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
<AppLanguageSwitcher />
</Col>
<Col className={"app-notifications"}>
<AppNotifications data={data} setData={setData} />
{/* <AppNotifications data={data} setData={setData} /> */}
</Col>
<Col className={"app-user-info"}>
<UserInfo />
......
packages/admin/src/components/layout/index.tsx
View file @ 4ff55782
......@@ -9,19 +9,20 @@ type AppLayoutProps = {
};
const AppLayout = ({ children }: AppLayoutProps) => {
const [isCollapsed, setIsCollapsed] = useState(false);
const toggleCollapse = () => {
setIsCollapsed(!isCollapsed);
};
return (
<div className={"app-layout"}>
<Layout className={"app-layout-mini-sidebar"}>
<AppSidebar isCollapsed={isCollapsed} />
<Layout className="app-layout-mini-sidebar-main">
<AppHeader toggleCollapse={toggleCollapse} />
<AppContentView>{children}</AppContentView>
<Layout className={"app-layout-mini-sidebar"}>
<AppSidebar isCollapsed={isCollapsed} />
<Layout className="app-layout-mini-sidebar-main">
<AppHeader toggleCollapse={toggleCollapse} />
<AppContentView>{children}</AppContentView>
</Layout>
</Layout>
</Layout>
</div>
);
};
......
packages/admin/src/context/auth-context/index.tsx
View file @ 4ff55782
......@@ -21,6 +21,8 @@ const AuthContextProvider = (props: { children: React.ReactNode }) => {
try {
removeCookie("role", "", { path: "/", expires: new Date(0) });
removeCookie("token", "", { path: "/", expires: new Date(0) });
removeCookie("fetch", "", { path: "/", expires: new Date(0) });
removeCookie("username", "", { path: "/", expires: new Date(0) });
// removeCookie("role","");
// removeCookie("token","");
window.location.href = "/sign-in";
......
packages/admin/src/context/trap-context/index.tsx
View file @ 4ff55782
......@@ -2,10 +2,7 @@ import { createContext } from "react";
const DataContext = createContext({
data: [],
setData: () => {},
websocket: null,
new_val:null,
setNewVal: (newVal:any) => {},
setData: (values:any) => {},
});
export default DataContext;
\ No newline at end of file
packages/admin/src/context/trap-context/provider.tsx 0 → 100644
View file @ 4ff55782
import React, { useState } from 'react';
import DataContext from './index';
const DataProvider = ({ children }) => {
const [data, setData] = useState([]); // Your initial data state
return (
<DataContext.Provider value={{ data, setData }}>
{children}
</DataContext.Provider>
);
};
export default DataProvider;
\ No newline at end of file
packages/admin/src/features/dashboard/index.tsx
View file @ 4ff55782
import React from "react";
import React, {useEffect, useContext, useState} from "react";
import { Card, Col } from "antd";
import styles from "./index.module.css";
import CardLineChart from "./card-lineChart";
......@@ -8,10 +8,10 @@ import { TranslationFiles } from "@/src/data/core";
import CardUsers from "./card-users";
import CardSocialTraffic from './card-socialTraffics'
import CardStats from './card-stats'
import UsersIcon from '../../components/assets/custom-ant-icons/sidebar/users-icon'
import { UsergroupAddOutlined } from "@ant-design/icons";
const DashboardComponent = () => {
const { t } = useTranslation(TranslationFiles.COMMON);
return (
<>
<div className="flex flex-wrap">
......
packages/admin/src/features/login/index.tsx
View file @ 4ff55782
......@@ -45,6 +45,8 @@ const Login = () => {
const removeCookieAfterOneHour = async () => {
removeCookie("role", { });
removeCookie("token", { });
removeCookie("username", { });
removeCookie("fetch", { });
window.location.href = "/sign-in";
};
......@@ -62,14 +64,14 @@ const Login = () => {
<AuthWrapper>
<Row justify={"center"} className={styles.logoImg}>
<Image
src={"/images/logo.png"}
src={"/images/elasticsearch.svg"}
alt="sign-in-logo"
height={200}
width={230}
height={160}
width={200}
/>
</Row>
<Row className={styles.signInText}>
<h2>{t("welcome-back")}</h2>
{/* <h2>{t("welcome-back")}</h2> */}
<p>{t("welcome-back-enter-credentials")}</p>
</Row>
<Row>
......
packages/admin/src/features/show-traps/index.tsx
View file @ 4ff55782
......@@ -4,83 +4,75 @@ import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsTable from "../../../../shared-library/src/tables/fms-table";
import { getColumns } from "./columns";
import DataContext from "@/src/context/trap-context";
import { DataSource } from "./data-source";
import ShowDetailsPopup from "./show-details-popup";
import axios from "axios";
import { Spin } from "antd";
import { fetchData } from "@/src/services/traps-service";
import { useCookies } from "react-cookie";
import DataContext from "../../context/trap-context";
import { fetchData } from "../../services/traps-service";
export default function ShowTraps() {
const { t } = useTranslation(TranslationFiles.COMMON);
const [modalProps, setModalProps] = useState({
isOpen: false,
variableBinding: null,
});
const { data, new_val, setNewVal } = useContext(DataContext);
const [data1, setData1] = useState([]);
const { data, setData } = useContext(DataContext);
const [data1, setData1] = useState(data);
const [loading, setLoading] = useState(false);
const [cookies] = useCookies([]);
const [cookies, setCookie] = useCookies([]);
useEffect(() => {
setLoading(true);
fetchData(cookies["token"]).then((transformedData) => {
if(transformedData)
setData1(transformedData);
if(new_val!=null){
if (new_val.flag == '0') {
console.log(new_val);
setData1((prevData:any) => [...prevData, new_val]);
setNewVal(null);
}
else if (new_val.flag==-1){
setData1((prevData:any) => prevData.filter((item:any) => item.id !== new_val.id));
if (!cookies["fetch"] ) {
const fetchData1 = async () => {
try {
const response = await fetchData(cookies["token"]);
setData(response);
setData1(response);
setCookie("fetch", 1);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData1();
console.log(data);
}
console.log(data);
setData1(data);
const authToken = `Bearer ${cookies["token"]}`;
const source = new EventSource(
`http://localhost:6647/api/notifications/sub?token=${authToken}`
);
source.addEventListener("open", () => {
console.log("SSE opened!");
});
source.addEventListener("message", (e) => {
const message = JSON.parse(e.data);
console.log(message);
if (message.new_val != null) {
const newData = message.new_val;
setData1((prevData: any) => [...prevData, newData]);
setData((prevData: any) => [...prevData, newData]);
} else {
setData((prevData: any) =>
prevData.filter((item: any) => item.id !== message.old_val.id)
);
setData1((prevData: any) =>
prevData.filter((item: any) => item.id !== message.old_val.id)
);
}
});
setLoading(false);
}, [new_val]);
// useEffect(() => {
// setLoading(true);
// const fetchData = async () => {
// axios
// .get("http://192.168.93.198:6647/api/rethink/data")
// .then((res: any) => {
// if (res.data) {
// const transformedData = res.data.map((item: any) => ({
// id: item.id,
// timestamp: item.timestamp,
// agentAddress: item.agentAddress,
// severity: item.severity,
// specificTrap: item.specificTrap,
// genericTrap: item.genericTrap,
// variableBindings: item.variableBindings,
// }));
// setData1(transformedData);
// if(new_val!=null){
// if (new_val.flag == '0') {
// console.log(new_val);
// setData1((prevData:any) => [...prevData, new_val]);
// setNewVal(null);
// }
// else if (new_val.flag==-1){
// setData1((prevData:any) => prevData.filter((item:any) => item.id !== new_val.id));
// }
// }
// }
// else {
// alert("Error");
// }
// })
// .catch((err: any) => console.log(err));
// };
// fetchData();
// setLoading(false);
// }, [new_val]);
source.addEventListener("error", (e) => {
console.error("Error: ", e);
});
return () => {
source.close();
console.log("SSE closed ");
};
}, []);
return (
<div>
<Spin spinning={loading}>
......
packages/admin/src/features/web-socket/index.tsx
View file @ 4ff55782
let websocket: WebSocket | null = new WebSocket("ws://localhost:6647/fms-websocket");
// let websocket: WebSocket | null = new WebSocket("ws://localhost:6647/fms-websocket");
websocket.onopen = function () {
console.log("Connected to WebSocket server");
};
// websocket.onopen = function () {
// console.log("Connected to WebSocket server");
// };
websocket.onclose = function () {
console.log("Disconnected from WebSocket server");
websocket = null;
};
// websocket.onclose = function () {
// console.log("Disconnected from WebSocket server");
// websocket = null;
// };
export default websocket;
\ No newline at end of file
// export default websocket;
\ No newline at end of file
packages/admin/src/services/sse-service.tsx
View file @ 4ff55782
// import React, { useEffect, useState, useContext } from 'react';
// import { useCookies } from "react-cookie";
// import DataContext from "../context/trap-context"
// import MainUtils from '../utils/main';
// // const SSEDataContext = createContext([]);
// const SSEService = ({ children }:any) => {
// import React, { createContext, useContext, useEffect, useState } from "react";
// const NotificationContext = createContext(null);
// export function NotificationProvider(props: { children: React.ReactNode }) {
// const [data, setData] = useState([]);
// const [eventSource, setEventSource] = useState(null);
// const [new_val, setNewVal] = useState([]);
// const [cookies] = useCookies([]);
// const contextValue = React.useMemo(() => ({ data, setData, setNewVal, eventSource, setEventSource }), [
// data,
// setData,
// setNewVal,
// eventSource,
// setEventSource
// ]);
// const [source, setSource] = useState(null);
// useEffect(() => {
// if (eventSource) {
// // Close the existing SSE connection if it exists (to avoid duplicates)
// eventSource.close();
// setEventSource(null);
// }
// // const headers = {
// // Authorization: `Bearer ${cookies["token"]}`, // Replace 'YOUR_ACCESS_TOKEN' with your actual access token
// // };
// console.log("token "+cookies["token"]);
// // if (!MainUtils.isEmptyValue(cookies["token"])) {
// const newEventSource = new EventSource('http://localhost:6647/api/notifications'
// //, { withCredentials: true }
// );
// setEventSource(newEventSource);
// newEventSource.onmessage = (event:any) => {
// const message = JSON.parse(event.data);
// console.log("rrr "+message.new_val.severity);
// if (message.new_val != null) {
// const newData = message.new_val;
// const transformedData = {
// flag:'0',
// id: newData.id,
// timestamp: newData.timestamp,
// agentAddress: newData.agentAddress,
// severity: newData.severity,
// specificTrap: newData.specificTrap,
// genericTrap: newData.genericTrap,
// variableBindings: newData.variableBindings,
// };
// // console.log("eeee"+transformedData.genericTrap);
// if (!data.some((item) => item.id === newData.id)) {
// setData((prevData) => [...prevData, newData]);
// }
// setNewVal(transformedData);
// setData((prevData: any) => [...prevData, newData]);
// }
// else{
// setNewVal({id:message.old_val.id,flag:-1,});
// }
// const eventSource = new EventSource("http://localhost:6647/api/notifications");
// eventSource.onopen = () => {
// console.log("SSE opened!");
// };
// // }
// }, [cookies["token"]]);
// useEffect(() => {
// // Close the SSE connection when the component unmounts
// eventSource.onmessage = (e) => {
// console.log(e.data);
// const newData = JSON.parse(e.data);
// setData(newData);
// };
// eventSource.onerror = (e) => {
// console.error("Error: ", e);
// };
// setSource(eventSource);
// return () => {
// if (eventSource) {
// eventSource.close();
// setEventSource(null);
// }
// console.error("SSE closed");
// eventSource.close();
// };
// }, []);
// return (
// <DataContext.Provider value={contextValue}>
// {children}
// </DataContext.Provider>
// <NotificationContext.Provider value={{ data: data }}>
// {props.children}
// </NotificationContext.Provider>
// );
// };
// }
// export function useNotification() {
// return useContext(NotificationContext);
// }
// // import React, { useEffect, useState, useContext } from 'react';
// // import { useCookies } from "react-cookie";
// // import DataContext from "../context/trap-context"
// // import MainUtils from '../utils/main';
// // // const SSEDataContext = createContext([]);
// // const SSEService = ({ children }:any) => {
// // const [data, setData] = useState([]);
// // const [eventSource, setEventSource] = useState(null);
// // const [new_val, setNewVal] = useState([]);
// // const [cookies] = useCookies([]);
// // const contextValue = React.useMemo(() => ({ data, setData, setNewVal, eventSource, setEventSource }), [
// // data,
// // setData,
// // setNewVal,
// // eventSource,
// // setEventSource
// // ]);
// // useEffect(() => {
// // if (eventSource) {
// // // Close the existing SSE connection if it exists (to avoid duplicates)
// // eventSource.close();
// // setEventSource(null);
// // }
// // // const headers = {
// // // Authorization: `Bearer ${cookies["token"]}`, // Replace 'YOUR_ACCESS_TOKEN' with your actual access token
// // // };
// // console.log("token "+cookies["token"]);
// // // if (!MainUtils.isEmptyValue(cookies["token"])) {
// // const newEventSource = new EventSource('http://localhost:6647/api/notifications'
// // //, { withCredentials: true }
// // );
// // setEventSource(newEventSource);
// // newEventSource.onmessage = (event:any) => {
// // const message = JSON.parse(event.data);
// // console.log("rrr "+message.new_val.severity);
// // if (message.new_val != null) {
// // const newData = message.new_val;
// // const transformedData = {
// // flag:'0',
// // id: newData.id,
// // timestamp: newData.timestamp,
// // agentAddress: newData.agentAddress,
// // severity: newData.severity,
// // specificTrap: newData.specificTrap,
// // genericTrap: newData.genericTrap,
// // variableBindings: newData.variableBindings,
// // };
// // // console.log("eeee"+transformedData.genericTrap);
// // if (!data.some((item) => item.id === newData.id)) {
// // setData((prevData) => [...prevData, newData]);
// // }
// // setNewVal(transformedData);
// // setData((prevData: any) => [...prevData, newData]);
// // }
// // else{
// // setNewVal({id:message.old_val.id,flag:-1,});
// // }
// // };
// // // }
// // }, [cookies["token"]]);
// // useEffect(() => {
// // // Close the SSE connection when the component unmounts
// // return () => {
// // if (eventSource) {
// // eventSource.close();
// // setEventSource(null);
// // }
// // };
// // }, []);
// // return (
// // <DataContext.Provider value={contextValue}>
// // {children}
// // </DataContext.Provider>
// // );
// // };
// export default SSEService;
\ No newline at end of file
// // export default SSEService;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab