Skip to content

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

Some Cleaning

parent 6a267318
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 73 deletions
packages/admin/pages/user/dashboard/index.tsx
View file @ d5f6f73e
import * as React from "react";
import Head from "next/head";
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 useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
......
packages/admin/src/components/layout/components/header/index.tsx
View file @ d5f6f73e
......@@ -44,7 +44,8 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
// };
// }, []);
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) {
<Col span={12}>
<Row gutter={8} align={"middle"} justify={"end"}>
<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"/>
</a>
</Col>
......
packages/admin/src/components/user-layout/components/header/index.tsx
View file @ d5f6f73e
......@@ -42,7 +42,8 @@ export default function AppHeader() {
// };
// }, []);
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 (
......@@ -58,7 +59,9 @@ export default function AppHeader() {
<Col span={12}>
<Row gutter={8} align={"middle"} justify={"end"}>
<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"/>
</a>
</Col>
......
packages/admin/src/components/user-layout/components/header/nav-bar/index.tsx
View file @ d5f6f73e
......@@ -25,12 +25,12 @@ const NavBar = () => {
<Menu.Item key="dashboard" icon={<FundOutlined
style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}>
{t("dashborad")}
{t("dashboard")}
</Menu.Item>
<Menu.Item key="traps" icon={<ExceptionOutlined
style={{ fontSize: "20px", color: "#000" }}
className={"ExclamationCircleOutlined "}/>}>
{("trap-data")}
{t("traps")}
</Menu.Item>
<Menu.Item key="profile" icon={<UserOutlined
style={{ fontSize: "20px", color: "#000" }}
......
packages/admin/src/components/user-layout/index.tsx
View file @ d5f6f73e
import React, { ReactNode, useState } from "react";
import React, { ReactNode, useEffect, useContext } from "react";
import { Layout } from "antd";
import AppContentView from "./components/content-view";
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 = {
children: ReactNode;
};
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 (
<div className={"app-layout"}>
<Layout className={"app-layout-mini-sidebar"}>
......
packages/admin/src/features/dashboard/card-barChart.tsx
View file @ d5f6f73e
......@@ -30,7 +30,7 @@ export default function CardBarChart({errorTrapCount, warnTrapCount, infoTrapCou
borderColor: "#000f24",
data: [errorTrapCount/trapCount, warnTrapCount/trapCount, infoTrapCount/trapCount],
fill: false,
barThickness: 40,
barThickness: 50,
}
],
},
......
packages/admin/src/features/dashboard/user-dashborad.tsx
View file @ d5f6f73e
import React from "react";
import React, {useEffect, useState} from "react";
import CardLineChart from "./card-lineChart";
import CardBarChart from "./card-barChart";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import CardUsers from "./card-users";
import CardStats from './card-stats'
const DashboardComponent = () => {
import { getAdminsCount, getUsersCount } from "@/src/services/user-service";
import {getTrapsCount, getErrorTrapCount, getWarningTrapCount, getInfoTrapCount} from "@/src/services/traps-service";
import { useCookies } from "react-cookie";
const UserDashboardComponent = () => {
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 (
<>
<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 className="flex flex-wrap">
<div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4 py-4">
<CardLineChart />
</div>
<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 className="flex flex-wrap mt-4">
<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 className="flex flex-wrap mt-4 shadow-2xl">
</div>
</>
);
};
export default DashboardComponent;
export default UserDashboardComponent;
packages/admin/src/utils/locales/ar/common.json
View file @ d5f6f73e
......@@ -97,5 +97,6 @@
"profile-page-setting":"ضبط صفحة الملف الشخصي",
"about-page-setting":"ضبط صفحة About",
"setting-about-page":"ضبط صفحة About",
"setting-profile-page":"ضبط صفحة الملف الشخصي"
"setting-profile-page":"ضبط صفحة الملف الشخصي",
"user":"مستخدم"
}
packages/admin/src/utils/locales/en/common.json
View file @ d5f6f73e
......@@ -97,5 +97,6 @@
"profile-page-setting":"Profile page setting",
"about-page-setting":"About page setting",
"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

HIAST - GitLab