Commit d5f6f73e authored by ReemyHasan's avatar ReemyHasan

Some Cleaning

parent 6a267318
import * as React from "react"; import * as React from "react";
import Head from "next/head"; import Head from "next/head";
import UserLayout from "../../../src/components/user-layout"; import UserLayout from "../../../src/components/user-layout";
import DashboardComponent from "@/src/features/dashboard"; import DashboardComponent from "@/src/features/dashboard/user-dashborad";
import { Fragment } from "react"; import { Fragment } from "react";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core"; import { TranslationFiles } from "@/src/data/core";
......
...@@ -44,7 +44,8 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) { ...@@ -44,7 +44,8 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
// }; // };
// }, []); // }, []);
const openKibana = () => { const openKibana = () => {
window.open("http://172.29.3.220:5601", "_blank"); window.open("http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))"
, "_blank");
}; };
...@@ -61,7 +62,9 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) { ...@@ -61,7 +62,9 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
<Col span={12}> <Col span={12}>
<Row gutter={8} align={"middle"} justify={"end"}> <Row gutter={8} align={"middle"} justify={"end"}>
<Col className={"app-notifications"}> <Col className={"app-notifications"}>
<a href="http://172.29.3.220:5601" target="_blank" onClick={openKibana}> <a
href="http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))"
target="_blank" onClick={openKibana}>
<img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/> <img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/>
</a> </a>
</Col> </Col>
......
...@@ -42,7 +42,8 @@ export default function AppHeader() { ...@@ -42,7 +42,8 @@ export default function AppHeader() {
// }; // };
// }, []); // }, []);
const openKibana = () => { const openKibana = () => {
window.open("http://172.29.3.220:5601", "_blank"); window.open("http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))",
"_blank");
}; };
return ( return (
...@@ -58,7 +59,9 @@ export default function AppHeader() { ...@@ -58,7 +59,9 @@ export default function AppHeader() {
<Col span={12}> <Col span={12}>
<Row gutter={8} align={"middle"} justify={"end"}> <Row gutter={8} align={"middle"} justify={"end"}>
<Col className={"app-notifications"}> <Col className={"app-notifications"}>
<a href="http://172.29.3.220:5601" target="_blank" onClick={openKibana}> <a
href="http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))"
target="_blank" onClick={openKibana}>
<img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/> <img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/>
</a> </a>
</Col> </Col>
......
...@@ -25,12 +25,12 @@ const NavBar = () => { ...@@ -25,12 +25,12 @@ const NavBar = () => {
<Menu.Item key="dashboard" icon={<FundOutlined <Menu.Item key="dashboard" icon={<FundOutlined
style={{ fontSize: "20px", color: "#000" }} style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}> className={"ExclamationCircleOutlined "}/>}>
{t("dashborad")} {t("dashboard")}
</Menu.Item> </Menu.Item>
<Menu.Item key="traps" icon={<ExceptionOutlined <Menu.Item key="traps" icon={<ExceptionOutlined
style={{ fontSize: "20px", color: "#000" }} style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}> className={"ExclamationCircleOutlined "}/>}>
{("trap-data")} {t("traps")}
</Menu.Item> </Menu.Item>
<Menu.Item key="profile" icon={<UserOutlined <Menu.Item key="profile" icon={<UserOutlined
style={{ fontSize: "20px", color: "#000" }} style={{ fontSize: "20px", color: "#000" }}
......
import React, { ReactNode, useState } from "react"; import React, { ReactNode, useEffect, useContext } from "react";
import { Layout } from "antd"; import { Layout } from "antd";
import AppContentView from "./components/content-view"; import AppContentView from "./components/content-view";
import AppHeader from "./components/header"; import AppHeader from "./components/header";
import { useCookies } from "react-cookie";
import DataContext from "../../context/trap-context";
import { fetchData } from "../../services/traps-service";
import { ApiGatewayURL } from "@/src/data/constant/app-constant";
type AppLayoutProps = { type AppLayoutProps = {
children: ReactNode; children: ReactNode;
}; };
const UserLayout = ({ children }: AppLayoutProps) => { const UserLayout = ({ children }: AppLayoutProps) => {
const { data, setData } = useContext(DataContext);
const [cookies, setCookie, removeCookie] = useCookies([]);
useEffect(() => {
const handleBeforeUnload = () => {
removeCookie("fetch");
};
window.addEventListener("beforeunload", handleBeforeUnload);
if (!cookies["fetch"] ) {
const fetchData1 = async () => {
try {
const response = await fetchData(cookies["token"]);
setData(response);
setCookie("fetch", 1);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData1();
}
const authToken = `${cookies["token"]}`;
const source = new EventSource(
`${ApiGatewayURL}/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;
setData((prevData: any) => [...prevData, newData]);
} else {
setData((prevData: any) =>
prevData.filter((item: any) => item.id !== message.old_val.id)
);
}
});
source.addEventListener("error", (e) => {
console.error("Error: ", e);
});
return () => {
source.close();
window.removeEventListener("beforeunload", handleBeforeUnload); // Remove the event listener
console.log("SSE closed ");
};
}, []);
return ( return (
<div className={"app-layout"}> <div className={"app-layout"}>
<Layout className={"app-layout-mini-sidebar"}> <Layout className={"app-layout-mini-sidebar"}>
......
...@@ -30,7 +30,7 @@ export default function CardBarChart({errorTrapCount, warnTrapCount, infoTrapCou ...@@ -30,7 +30,7 @@ export default function CardBarChart({errorTrapCount, warnTrapCount, infoTrapCou
borderColor: "#000f24", borderColor: "#000f24",
data: [errorTrapCount/trapCount, warnTrapCount/trapCount, infoTrapCount/trapCount], data: [errorTrapCount/trapCount, warnTrapCount/trapCount, infoTrapCount/trapCount],
fill: false, fill: false,
barThickness: 40, barThickness: 50,
} }
], ],
}, },
......
import React from "react"; import React, {useEffect, useState} from "react";
import CardLineChart from "./card-lineChart"; import CardLineChart from "./card-lineChart";
import CardBarChart from "./card-barChart"; import CardBarChart from "./card-barChart";
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 CardUsers from "./card-users"; import { getAdminsCount, getUsersCount } from "@/src/services/user-service";
import CardStats from './card-stats' import {getTrapsCount, getErrorTrapCount, getWarningTrapCount, getInfoTrapCount} from "@/src/services/traps-service";
const DashboardComponent = () => { import { useCookies } from "react-cookie";
const UserDashboardComponent = () => {
const { t } = useTranslation(TranslationFiles.COMMON); const { t } = useTranslation(TranslationFiles.COMMON);
const [cookies] = useCookies([]);
const [trapCount, setTrapCount] = useState([]);
const [errorTrapCount, setErrorTrapCount] = useState([]);
const [warnTrapCount, setWarnTrapCount] = useState([]);
const [infoTrapCount, setInfoTrapCount] = useState([]);
useEffect(() => {
async function fetchTrapsCount() {
try {
const response2 = await getTrapsCount(cookies["token"]);
setTrapCount(response2)
} catch (error) {
console.log("error:"+error);
}
}
async function fetchErrorTrapsCount() {
try {
const response2 = await getErrorTrapCount(cookies["token"]);
setErrorTrapCount(response2)
} catch (error) {
console.log("error:"+error);
}
}
async function fetchWarnignTrapsCount() {
try {
const response2 = await getWarningTrapCount(cookies["token"]);
setWarnTrapCount(response2)
} catch (error) {
console.log("error:"+error);
}
}
async function fetchInfoTrapsCount() {
try {
const response2 = await getInfoTrapCount(cookies["token"]);
setInfoTrapCount(response2)
} catch (error) {
console.log("error:"+error);
}
}
fetchTrapsCount();
fetchErrorTrapsCount();
fetchWarnignTrapsCount();
fetchInfoTrapsCount();
}, []);
return ( return (
<> <>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="TRAFFIC"
statTitle="350,897"
statArrow="up"
statPercent="3.48"
statPercentColor="text-emerald-500"
statDescripiron="Since last month"
statIconName="far fa-chart-bar"
statIconColor="bg-red-500"
/>
</div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="USERS"
statTitle="2,356"
statArrow="down"
statPercent="3.48"
statPercentColor="text-red-500"
statDescripiron="Since last month"
statIconName="group"
statIconColor="primary-blue-600"
/>
</div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="ADMINS"
statTitle="924"
statArrow="down"
statPercent="1.10"
statPercentColor="text-orange-500"
statDescripiron="Since last month"
statIconName="admin"
statIconColor="secondary-color-yellow"
/>
</div>
<div className="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="PERFORMANCE"
statTitle="49,65%"
statArrow="up"
statPercent="12"
statPercentColor="text-emerald-500"
statDescripiron="Since last month"
statIconName="fas fa-percent"
statIconColor="bg-lightBlue-500"
/>
</div>
</div> </div>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4 py-4"> <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4 py-4">
<CardLineChart /> <CardLineChart />
</div> </div>
<div className="w-full xl:w-4/12 px-4 py-4"> <div className="w-full xl:w-4/12 px-4 py-4">
<CardBarChart /> <CardBarChart
errorTrapCount = {errorTrapCount}
warnTrapCount = {warnTrapCount}
infoTrapCount = {infoTrapCount}
trapCount = {trapCount}
/>
</div> </div>
</div> </div>
<div className="flex flex-wrap mt-4"> <div className="flex flex-wrap mt-4 shadow-2xl">
<div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
<CardUsers />
</div>
<div className="w-full xl:w-4/12 px-4">
</div>
</div> </div>
</> </>
); );
}; };
export default DashboardComponent; export default UserDashboardComponent;
...@@ -97,5 +97,6 @@ ...@@ -97,5 +97,6 @@
"profile-page-setting":"ضبط صفحة الملف الشخصي", "profile-page-setting":"ضبط صفحة الملف الشخصي",
"about-page-setting":"ضبط صفحة About", "about-page-setting":"ضبط صفحة About",
"setting-about-page":"ضبط صفحة About", "setting-about-page":"ضبط صفحة About",
"setting-profile-page":"ضبط صفحة الملف الشخصي" "setting-profile-page":"ضبط صفحة الملف الشخصي",
"user":"مستخدم"
} }
...@@ -97,5 +97,6 @@ ...@@ -97,5 +97,6 @@
"profile-page-setting":"Profile page setting", "profile-page-setting":"Profile page setting",
"about-page-setting":"About page setting", "about-page-setting":"About page setting",
"setting-about-page":"Setting about page", "setting-about-page":"Setting about page",
"setting-profile-page":"Setting profile page" "setting-profile-page":"Setting profile page",
"user":"User"
} }
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