Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
FMS_Project_Frontend
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
bashar.hussein
FMS_Project_Frontend
Commits
4ff55782
Commit
4ff55782
authored
Aug 09, 2023
by
ReemyHasan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add SSE Component
parent
42afe629
Changes
14
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
272 additions
and
248 deletions
+272
-248
_app.tsx
packages/admin/pages/_app.tsx
+18
-37
index.tsx
packages/admin/pages/index.tsx
+2
-7
index.tsx
packages/admin/pages/traps/index.tsx
+0
-2
index.tsx
...ents/layout/components/header/app-notifications/index.tsx
+8
-8
index.tsx
...s/admin/src/components/layout/components/header/index.tsx
+35
-36
index.tsx
packages/admin/src/components/layout/index.tsx
+8
-7
index.tsx
packages/admin/src/context/auth-context/index.tsx
+2
-0
index.tsx
packages/admin/src/context/trap-context/index.tsx
+1
-4
provider.tsx
packages/admin/src/context/trap-context/provider.tsx
+14
-0
index.tsx
packages/admin/src/features/dashboard/index.tsx
+3
-3
index.tsx
packages/admin/src/features/login/index.tsx
+6
-4
index.tsx
packages/admin/src/features/show-traps/index.tsx
+54
-62
index.tsx
packages/admin/src/features/web-socket/index.tsx
+9
-9
sse-service.tsx
packages/admin/src/services/sse-service.tsx
+112
-69
No files found.
packages/admin/pages/_app.tsx
View file @
4ff55782
...
@@ -11,66 +11,47 @@ import "@/../shared-library/globals.css";
...
@@ -11,66 +11,47 @@ import "@/../shared-library/globals.css";
import
AuthContextProvider
from
"@/src/context/auth-context"
;
import
AuthContextProvider
from
"@/src/context/auth-context"
;
import
useTranslation
from
"next-translate/useTranslation"
;
import
useTranslation
from
"next-translate/useTranslation"
;
import
{
TranslationFiles
}
from
"@/src/data/core"
;
import
{
TranslationFiles
}
from
"@/src/data/core"
;
import
websocket
from
"../src/features/web-socket"
;
import
DataProvider
from
"../src/context/trap-context/provider"
import
DataContext
from
"../src/context/trap-context"
;
import
"../src/styles/tailwind.css"
;
import
'../src/styles/tailwind.css'
;
import
{
useCookies
}
from
"react-cookie"
;
import
{
useCookies
}
from
"react-cookie"
;
const
inter
=
Inter
({
subsets
:
[
"latin"
]
});
const
inter
=
Inter
({
subsets
:
[
"latin"
]
});
export
default
function
App
({
Component
,
pageProps
}:
AppProps
)
{
export
default
function
App
({
Component
,
pageProps
}:
AppProps
)
{
const
router
=
useRouter
();
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
const
[
data
,
setData
]
=
React
.
useState
([]);
const
[
data
,
setData
]
=
React
.
useState
([]);
const
[
new_val
,
setNewVal
]
=
React
.
useState
(
null
);
const
contextValue
=
React
.
useMemo
(()
=>
({
data
,
setData
}),
[
const
contextValue
=
React
.
useMemo
(()
=>
({
data
,
setData
,
websocket
,
new_val
,
setNewVal
}),
[
data
,
data
,
setData
,
setData
,
websocket
,
new_val
,
setNewVal
]);
]);
const
[
cookies
,
setCookies
,
removeCookie
]
=
useCookies
([]);
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
// }
useEffect
(()
=>
{
useEffect
(()
=>
{
if
(
typeof
window
!==
"undefined"
)
{
if
(
typeof
window
!==
"undefined"
)
{
const
loader
=
document
.
getElementById
(
"globalLoader"
);
const
loader
=
document
.
getElementById
(
"globalLoader"
);
if
(
loader
)
loader
.
remove
();
if
(
loader
)
loader
.
remove
();
}
}
},
[]);
},
[]);
// useEffect(() => {
// if (!websocket) {
const
removeCookieAfterOneHour
=
async
()
=>
{
// return;
// }
// return () => {
// if (websocket) {
// websocket.close();
// }
// };
// }, []);
const
removeCookieAfterOneHour
=
async
()
=>
{
removeCookie
(
"role"
,
{
path
:
"/"
,
sameSite
:
true
});
removeCookie
(
"role"
,
{
path
:
"/"
,
sameSite
:
true
});
removeCookie
(
"token"
,
{
path
:
"/"
,
sameSite
:
true
});
removeCookie
(
"token"
,
{
path
:
"/"
,
sameSite
:
true
});
removeCookie
(
"username"
,
{
path
:
"/"
,
sameSite
:
true
});
removeCookie
(
"username"
,
{
path
:
"/"
,
sameSite
:
true
});
if
(
cookies
[
"fetch"
])
removeCookie
(
"fetch"
,
{
path
:
"/"
,
sameSite
:
true
});
window
.
location
.
href
=
"/sign-in"
;
window
.
location
.
href
=
"/sign-in"
;
};
};
useEffect
(()
=>
{
useEffect
(()
=>
{
const
timeout
=
setTimeout
(()
=>
{
const
timeout
=
setTimeout
(
removeCookieAfterOneHour
();
()
=>
{
},
360000
//000
removeCookieAfterOneHour
();
},
360000
//000
);
);
return
()
=>
{
return
()
=>
{
clearTimeout
(
timeout
);
clearTimeout
(
timeout
);
};
};
},
[]);
},
[]);
return
(
return
(
<
Fragment
>
<
Fragment
>
<
Head
>
<
Head
>
<
title
>
{
t
(
"fms"
)
}
</
title
>
<
title
>
{
t
(
"fms"
)
}
</
title
>
...
@@ -86,11 +67,11 @@ export default function App({ Component, pageProps }: AppProps) {
...
@@ -86,11 +67,11 @@ export default function App({ Component, pageProps }: AppProps) {
},
},
}
}
}
}
>
>
<
DataContext
.
Provider
value=
{
contextValue
}
>
<
AuthContextProvider
>
<
AuthContextProvider
>
<
DataProvider
value=
{
contextValue
}
>
<
Component
{
...
pageProps
}
/>
<
Component
{
...
pageProps
}
/>
</
AuthContext
Provider
>
</
Data
Provider
>
</
DataContext
.
Provider
>
</
AuthContext
Provider
>
</
ANTDConfigProvider
>
</
ANTDConfigProvider
>
</
main
>
</
main
>
</
Fragment
>
</
Fragment
>
...
...
packages/admin/pages/index.tsx
View file @
4ff55782
import
*
as
React
from
"react"
;
import
*
as
React
from
"react"
;
import
{
useEffect
}
from
"react"
;
// Import useEffect
import
AppLayout
from
"@/src/components/layout"
;
import
{
Fragment
}
from
"react"
;
import
{
Fragment
}
from
"react"
;
import
Head
from
"next/head"
;
import
Head
from
"next/head"
;
import
{
TranslationFiles
}
from
"@/src/data/core"
;
import
{
TranslationFiles
}
from
"@/src/data/core"
;
import
useTranslation
from
"next-translate/useTranslation"
;
import
useTranslation
from
"next-translate/useTranslation"
;
import
DashboardComponent
from
"@/src/features/dashboard"
;
import
{
useRouter
}
from
"next/router"
;
import
{
useRouter
}
from
"next/router"
;
import
{
useCookies
}
from
"react-cookie"
;
import
{
useCookies
}
from
"react-cookie"
;
import
MainUtils
from
"@/src/utils/main"
;
import
MainUtils
from
"@/src/utils/main"
;
...
@@ -25,14 +22,12 @@ export default function Home() {
...
@@ -25,14 +22,12 @@ export default function Home() {
return
(
return
(
<
Fragment
>
<
Fragment
>
<
Head
>
<
Head
>
<
title
>
{
t
(
"
dashboard
"
)
}
</
title
>
<
title
>
{
t
(
"
fms
"
)
}
</
title
>
</
Head
>
</
Head
>
<
AppLayout
>
<
main
className=
{
`app-main-container`
}
>
<
main
className=
{
`app-main-container`
}
>
<
div
className=
{
"page-header"
}
>
{
t
(
""
)
}
</
div
>
<
div
className=
{
"page-header"
}
>
{
t
(
""
)
}
</
div
>
{
t
(
"
W
aiting"
)
}
{
t
(
"
w
aiting"
)
}
</
main
>
</
main
>
</
AppLayout
>
</
Fragment
>
</
Fragment
>
);
);
}
}
packages/admin/pages/traps/index.tsx
View file @
4ff55782
import
*
as
React
from
"react"
;
import
*
as
React
from
"react"
;
import
{
useState
}
from
"react"
;
import
Head
from
"next/head"
;
import
Head
from
"next/head"
;
import
AppLayout
from
"@/src/components/layout"
;
import
AppLayout
from
"@/src/components/layout"
;
import
{
Fragment
}
from
"react"
;
import
{
Fragment
}
from
"react"
;
...
@@ -8,7 +7,6 @@ import { TranslationFiles } from "@/src/data/core";
...
@@ -8,7 +7,6 @@ import { TranslationFiles } from "@/src/data/core";
import
ShowTraps
from
"@/src/features/show-traps"
;
import
ShowTraps
from
"@/src/features/show-traps"
;
export
default
function
Traps
()
{
export
default
function
Traps
()
{
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
return
(
return
(
<
Fragment
>
<
Fragment
>
<
Head
>
<
Head
>
...
...
packages/admin/src/components/layout/components/header/app-notifications/index.tsx
View file @
4ff55782
...
@@ -24,14 +24,14 @@ const AppNotifications = ({ data, setData }: AppNotificationsProps) => {
...
@@ -24,14 +24,14 @@ const AppNotifications = ({ data, setData }: AppNotificationsProps) => {
</
Menu
.
Item
>
</
Menu
.
Item
>
<
List
<
List
className=
"notify-list scrollRow"
className=
"notify-list scrollRow"
dataSource=
{
data
.
slice
(
-
3
)
}
//
dataSource={data.slice(-3)}
renderItem=
{
(
item
:
any
)
=>
(
//
renderItem={(item: any) => (
<
List
.
Item
>
//
<List.Item>
<
div
className=
{
`severity-${item.severity}`
}
>
{
item
.
severity
}
</
div
>
//
<div className={`severity-${item.severity}`}>{item.severity}</div>
<
div
>
{
item
.
agentAddress
}
</
div
>
//
<div>{item.agentAddress}</div>
{
/* Add more properties as required */
}
//
{/* Add more properties as required */}
</
List
.
Item
>
//
</List.Item>
)
}
//
)}
/>
/>
<
Row
gutter=
{
24
}
>
<
Row
gutter=
{
24
}
>
{
" "
}
{
" "
}
...
...
packages/admin/src/components/layout/components/header/index.tsx
View file @
4ff55782
import
React
,
{
useEffect
,
useContext
,
useRef
}
from
"react"
;
import
React
,
{
useEffect
,
useContext
,
useRef
}
from
"react"
;
import
{
Layout
,
Row
,
Col
}
from
"antd"
;
import
{
Layout
,
Row
,
Col
}
from
"antd"
;
import
AppLanguageSwitcher
from
"./app-language-switcher"
;
import
AppLanguageSwitcher
from
"./app-language-switcher"
;
import
AppNotifications
from
"./app-notifications"
;
import
UserInfo
from
"./user-info"
;
import
UserInfo
from
"./user-info"
;
import
MenuIcon
from
"@/src/components/assets/custom-ant-icons/menu-icon"
;
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
;
const
{
Header
}
=
Layout
;
type
AppHeaderProps
=
{
type
AppHeaderProps
=
{
toggleCollapse
:
Function
;
toggleCollapse
:
Function
;
};
};
export
default
function
AppHeader
({
toggleCollapse
}:
AppHeaderProps
)
{
export
default
function
AppHeader
({
toggleCollapse
}:
AppHeaderProps
)
{
const
{
data
,
setData
,
websocket
,
setNewVal
}
=
useContext
(
DataContext
);
//
const { data, setData, websocket, setNewVal } = useContext(DataContext);
useEffect
(()
=>
{
//
useEffect(() => {
if
(
!
websocket
)
{
//
if (!websocket) {
return
;
//
return;
}
//
}
websocket
.
onmessage
=
function
(
event
:
any
)
{
//
websocket.onmessage = function (event:any) {
const
message
=
JSON
.
parse
(
event
.
data
);
//
const message = JSON.parse(event.data);
console
.
log
(
message
);
//
console.log(message);
if
(
message
.
new_val
!=
null
)
{
//
if (message.new_val != null) {
const
newData
=
message
.
new_val
;
//
const newData = message.new_val;
const
transformedData
=
{
//
const transformedData = {
flag
:
'0'
,
//
flag:'0',
id
:
newData
.
id
,
//
id: newData.id,
timestamp
:
newData
.
timestamp
,
//
timestamp: newData.timestamp,
agentAddress
:
newData
.
agentAddress
,
//
agentAddress: newData.agentAddress,
severity
:
newData
.
severity
,
//
severity: newData.severity,
specificTrap
:
newData
.
specificTrap
,
//
specificTrap: newData.specificTrap,
genericTrap
:
newData
.
genericTrap
,
//
genericTrap: newData.genericTrap,
variableBindings
:
newData
.
variableBindings
,
//
variableBindings: newData.variableBindings,
};
//
};
setNewVal
(
transformedData
);
//
setNewVal(transformedData);
setData
((
prevData
:
any
)
=>
[...
prevData
,
newData
]);
//
setData((prevData: any) => [...prevData, newData]);
}
//
}
else
{
//
else{
setNewVal
({
id
:
message
.
old_val
.
id
,
flag
:
-
1
,});
//
setNewVal({id:message.old_val.id,flag:-1,});
}
//
}
};
//
};
return
()
=>
{
//
return () => {
// if (websocket) {
//
// if (websocket) {
// websocket.close();
//
// websocket.close();
// }
//
// }
};
//
};
},
[]);
//
}, []);
const
openKibana
=
()
=>
{
const
openKibana
=
()
=>
{
window
.
open
(
"http://172.29.3.220:5601"
,
"_blank"
);
window
.
open
(
"http://172.29.3.220:5601"
,
"_blank"
);
};
};
...
@@ -71,7 +70,7 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
...
@@ -71,7 +70,7 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
<
AppLanguageSwitcher
/>
<
AppLanguageSwitcher
/>
</
Col
>
</
Col
>
<
Col
className=
{
"app-notifications"
}
>
<
Col
className=
{
"app-notifications"
}
>
<
AppNotifications
data=
{
data
}
setData=
{
setData
}
/>
{
/* <AppNotifications data={data} setData={setData} /> */
}
</
Col
>
</
Col
>
<
Col
className=
{
"app-user-info"
}
>
<
Col
className=
{
"app-user-info"
}
>
<
UserInfo
/>
<
UserInfo
/>
...
...
packages/admin/src/components/layout/index.tsx
View file @
4ff55782
...
@@ -9,19 +9,20 @@ type AppLayoutProps = {
...
@@ -9,19 +9,20 @@ type AppLayoutProps = {
};
};
const
AppLayout
=
({
children
}:
AppLayoutProps
)
=>
{
const
AppLayout
=
({
children
}:
AppLayoutProps
)
=>
{
const
[
isCollapsed
,
setIsCollapsed
]
=
useState
(
false
);
const
[
isCollapsed
,
setIsCollapsed
]
=
useState
(
false
);
const
toggleCollapse
=
()
=>
{
const
toggleCollapse
=
()
=>
{
setIsCollapsed
(
!
isCollapsed
);
setIsCollapsed
(
!
isCollapsed
);
};
};
return
(
return
(
<
div
className=
{
"app-layout"
}
>
<
div
className=
{
"app-layout"
}
>
<
Layout
className=
{
"app-layout-mini-sidebar"
}
>
<
Layout
className=
{
"app-layout-mini-sidebar"
}
>
<
AppSidebar
isCollapsed=
{
isCollapsed
}
/>
<
AppSidebar
isCollapsed=
{
isCollapsed
}
/>
<
Layout
className=
"app-layout-mini-sidebar-main"
>
<
Layout
className=
"app-layout-mini-sidebar-main"
>
<
AppHeader
toggleCollapse=
{
toggleCollapse
}
/>
<
AppHeader
toggleCollapse=
{
toggleCollapse
}
/>
<
AppContentView
>
{
children
}
</
AppContentView
>
<
AppContentView
>
{
children
}
</
AppContentView
>
</
Layout
>
</
Layout
>
</
Layout
>
</
Layout
>
</
div
>
</
div
>
);
);
};
};
...
...
packages/admin/src/context/auth-context/index.tsx
View file @
4ff55782
...
@@ -21,6 +21,8 @@ const AuthContextProvider = (props: { children: React.ReactNode }) => {
...
@@ -21,6 +21,8 @@ const AuthContextProvider = (props: { children: React.ReactNode }) => {
try
{
try
{
removeCookie
(
"role"
,
""
,
{
path
:
"/"
,
expires
:
new
Date
(
0
)
});
removeCookie
(
"role"
,
""
,
{
path
:
"/"
,
expires
:
new
Date
(
0
)
});
removeCookie
(
"token"
,
""
,
{
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("role","");
// removeCookie("token","");
// removeCookie("token","");
window
.
location
.
href
=
"/sign-in"
;
window
.
location
.
href
=
"/sign-in"
;
...
...
packages/admin/src/context/trap-context/index.tsx
View file @
4ff55782
...
@@ -2,10 +2,7 @@ import { createContext } from "react";
...
@@ -2,10 +2,7 @@ import { createContext } from "react";
const
DataContext
=
createContext
({
const
DataContext
=
createContext
({
data
:
[],
data
:
[],
setData
:
()
=>
{},
setData
:
(
values
:
any
)
=>
{},
websocket
:
null
,
new_val
:
null
,
setNewVal
:
(
newVal
:
any
)
=>
{},
});
});
export
default
DataContext
;
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
{
Card
,
Col
}
from
"antd"
;
import
styles
from
"./index.module.css"
;
import
styles
from
"./index.module.css"
;
import
CardLineChart
from
"./card-lineChart"
;
import
CardLineChart
from
"./card-lineChart"
;
...
@@ -8,10 +8,10 @@ import { TranslationFiles } from "@/src/data/core";
...
@@ -8,10 +8,10 @@ import { TranslationFiles } from "@/src/data/core";
import
CardUsers
from
"./card-users"
;
import
CardUsers
from
"./card-users"
;
import
CardSocialTraffic
from
'./card-socialTraffics'
import
CardSocialTraffic
from
'./card-socialTraffics'
import
CardStats
from
'./card-stats'
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
DashboardComponent
=
()
=>
{
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
return
(
return
(
<>
<>
<
div
className=
"flex flex-wrap"
>
<
div
className=
"flex flex-wrap"
>
...
...
packages/admin/src/features/login/index.tsx
View file @
4ff55782
...
@@ -45,6 +45,8 @@ const Login = () => {
...
@@ -45,6 +45,8 @@ const Login = () => {
const
removeCookieAfterOneHour
=
async
()
=>
{
const
removeCookieAfterOneHour
=
async
()
=>
{
removeCookie
(
"role"
,
{
});
removeCookie
(
"role"
,
{
});
removeCookie
(
"token"
,
{
});
removeCookie
(
"token"
,
{
});
removeCookie
(
"username"
,
{
});
removeCookie
(
"fetch"
,
{
});
window
.
location
.
href
=
"/sign-in"
;
window
.
location
.
href
=
"/sign-in"
;
};
};
...
@@ -62,14 +64,14 @@ const Login = () => {
...
@@ -62,14 +64,14 @@ const Login = () => {
<
AuthWrapper
>
<
AuthWrapper
>
<
Row
justify=
{
"center"
}
className=
{
styles
.
logoImg
}
>
<
Row
justify=
{
"center"
}
className=
{
styles
.
logoImg
}
>
<
Image
<
Image
src=
{
"/images/
logo.pn
g"
}
src=
{
"/images/
elasticsearch.sv
g"
}
alt=
"sign-in-logo"
alt=
"sign-in-logo"
height=
{
20
0
}
height=
{
16
0
}
width=
{
2
3
0
}
width=
{
2
0
0
}
/>
/>
</
Row
>
</
Row
>
<
Row
className=
{
styles
.
signInText
}
>
<
Row
className=
{
styles
.
signInText
}
>
<
h2
>
{
t
(
"welcome-back"
)
}
</
h2
>
{
/* <h2>{t("welcome-back")}</h2> */
}
<
p
>
{
t
(
"welcome-back-enter-credentials"
)
}
</
p
>
<
p
>
{
t
(
"welcome-back-enter-credentials"
)
}
</
p
>
</
Row
>
</
Row
>
<
Row
>
<
Row
>
...
...
packages/admin/src/features/show-traps/index.tsx
View file @
4ff55782
...
@@ -4,83 +4,75 @@ import useTranslation from "next-translate/useTranslation";
...
@@ -4,83 +4,75 @@ import useTranslation from "next-translate/useTranslation";
import
{
TranslationFiles
}
from
"@/src/data/core"
;
import
{
TranslationFiles
}
from
"@/src/data/core"
;
import
FmsTable
from
"../../../../shared-library/src/tables/fms-table"
;
import
FmsTable
from
"../../../../shared-library/src/tables/fms-table"
;
import
{
getColumns
}
from
"./columns"
;
import
{
getColumns
}
from
"./columns"
;
import
DataContext
from
"@/src/context/trap-context"
;
import
{
DataSource
}
from
"./data-source"
;
import
ShowDetailsPopup
from
"./show-details-popup"
;
import
ShowDetailsPopup
from
"./show-details-popup"
;
import
axios
from
"axios"
;
import
{
Spin
}
from
"antd"
;
import
{
Spin
}
from
"antd"
;
import
{
fetchData
}
from
"@/src/services/traps-service"
;
import
{
useCookies
}
from
"react-cookie"
;
import
{
useCookies
}
from
"react-cookie"
;
import
DataContext
from
"../../context/trap-context"
;
import
{
fetchData
}
from
"../../services/traps-service"
;
export
default
function
ShowTraps
()
{
export
default
function
ShowTraps
()
{
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
const
{
t
}
=
useTranslation
(
TranslationFiles
.
COMMON
);
const
[
modalProps
,
setModalProps
]
=
useState
({
const
[
modalProps
,
setModalProps
]
=
useState
({
isOpen
:
false
,
isOpen
:
false
,
variableBinding
:
null
,
variableBinding
:
null
,
});
});
const
{
data
,
new_val
,
setNewVal
}
=
useContext
(
DataContext
);
const
{
data
,
setData
}
=
useContext
(
DataContext
);
const
[
data1
,
setData1
]
=
useState
(
[]
);
const
[
data1
,
setData1
]
=
useState
(
data
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
cookies
]
=
useCookies
([]);
const
[
cookies
,
setCookie
]
=
useCookies
([]);
useEffect
(()
=>
{
useEffect
(()
=>
{
setLoading
(
true
);
if
(
!
cookies
[
"fetch"
]
)
{
fetchData
(
cookies
[
"token"
]).
then
((
transformedData
)
=>
{
const
fetchData1
=
async
()
=>
{
if
(
transformedData
)
try
{
setData1
(
transformedData
);
const
response
=
await
fetchData
(
cookies
[
"token"
]);
if
(
new_val
!=
null
){
setData
(
response
);
if
(
new_val
.
flag
==
'0'
)
{
setData1
(
response
);
setCookie
(
"fetch"
,
1
);
console
.
log
(
new_val
);
}
catch
(
error
)
{
setData1
((
prevData
:
any
)
=>
[...
prevData
,
new_val
]);
console
.
error
(
"Error fetching data:"
,
error
);
setNewVal
(
null
);
}
else
if
(
new_val
.
flag
==-
1
){
setData1
((
prevData
:
any
)
=>
prevData
.
filter
((
item
:
any
)
=>
item
.
id
!==
new_val
.
id
));
}
}
};
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
(
return
(
<
div
>
<
div
>
<
Spin
spinning=
{
loading
}
>
<
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
()
{
//
websocket.onopen = function () {
console
.
log
(
"Connected to WebSocket server"
);
//
console.log("Connected to WebSocket server");
};
//
};
websocket
.
onclose
=
function
()
{
//
websocket.onclose = function () {
console
.
log
(
"Disconnected from WebSocket server"
);
//
console.log("Disconnected from WebSocket server");
websocket
=
null
;
//
websocket = null;
};
//
};
export
default
websocket
;
// export default websocket;
\ No newline at end of file
\ No newline at end of file
packages/admin/src/services/sse-service.tsx
View file @
4ff55782
// import React, { useEffect, useState, useContext } from 'react';
// import React, { createContext, useContext, useEffect, useState } from "react";
// import { useCookies } from "react-cookie";
// import DataContext from "../context/trap-context"
// const NotificationContext = createContext(null);
// import MainUtils from '../utils/main';
// // const SSEDataContext = createContext([]);
// export function NotificationProvider(props: { children: React.ReactNode }) {
// const SSEService = ({ children }:any) => {
// const [data, setData] = useState([]);
// const [data, setData] = useState([]);
// const [eventSource, setEventSource] = useState(null);
// const [source, setSource] = 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(() => {
// useEffect(() => {
// if (eventSource) {
// const eventSource = new EventSource("http://localhost:6647/api/notifications");
// // Close the existing SSE connection if it exists (to avoid duplicates)
// eventSource.close();
// eventSource.onopen = () => {
// setEventSource(null);
// console.log("SSE opened!");
// }
// // 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(() => {
// eventSource.onmessage = (e) => {
// // Close the SSE connection when the component unmounts
// console.log(e.data);
// const newData = JSON.parse(e.data);
// setData(newData);
// };
// eventSource.onerror = (e) => {
// console.error("Error: ", e);
// };
// setSource(eventSource);
// return () => {
// return () => {
// if (eventSource) {
// console.error("SSE closed");
// eventSource.close();
// eventSource.close();
// setEventSource(null);
// }
// };
// };
// }, []);
// }, []);
// return (
// return (
// <
DataContext.Provider value={contextValue
}>
// <
NotificationContext.Provider value={{ data: data }
}>
// {children}
// {
props.
children}
// </
Data
Context.Provider>
// </
Notification
Context.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;
// // export default SSEService;
\ No newline at end of file
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment