Skip to content

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

fixing dashboard

parent 4ff55782
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 134 deletions
packages/admin/src/data/constant/app-constant.tsx
View file @ 37dd1624
// export const AUTH_TOKEN: string = "token";
export const Default_Language: string = "app-language";
export const ApiGatewayURL: string = `http://localhost:6644`;
export const TrapURL: string = `http://localhost:6644/api/rethink/data`;
export const TrapURL: string = `http://localhost:6644/api/rethink`;
export const SettingURL: string = `http://localhost:6644/api/about`;
export const AuthURL: string = "http://localhost:6644/auth/";
export const UserURL: string = `http://localhost:6644/users/`;
......
packages/admin/src/features/dashboard/card-lineChart.tsx
View file @ 37dd1624
import React, { Component } from "react";
import React, { Component, useEffect, useState } from "react";
import Chart from "chart.js/auto";
import { useCookies } from "react-cookie";
import { getSeverityStatistics } from "../../services/traps-service";
export default function CardLineChart() {
React.useEffect(() => {
var config = {
type: "line",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: "WARNING",
backgroundColor: "#fadb14",
borderColor: "#fadb14",
data: [65, 78, 66, 44, 56, 67, 75],
fill: false,
},
{
label: "INFO",
backgroundColor: "#10B981",
borderColor: "#10B981",
data: [65, 78, 76, 34, 46, 67, 85],
fill: false,
},
{
label: "ERROR",
fill: false,
backgroundColor: "#EF4444",
borderColor: "#EF4444",
data: [40, 68, 86, 74, 56, 60, 87],
},
],
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Severity traps Charts",
fontColor: "white",
const [data, setData] = useState([]);
const [cookies] = useCookies([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await getSeverityStatistics(cookies["token"]);
console.log(response);
setData(response);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);
useEffect(() => {
const severityColors:any = {
WARNING: "#fadb14",
INFO: "#10B981",
ERROR: "#EF4444",
};
if (window.myLine) {
window.myLine.destroy();
}
// Check if data has been fetched and is not an empty object
if (Object.keys(data).length > 0) {
const labels = Object.keys(data).sort(); // Use the sorted timestamps as labels
const datasets = Object.keys(severityColors).map((severity) => ({
label: severity,
backgroundColor: severityColors[severity],
borderColor: severityColors[severity],
data: labels.map((timestamp) => data[timestamp][severity] || 0),
fill: false,
}));
var config = {
type: "line",
data: {
labels: labels.map((timestamp) =>
new Date(timestamp).toLocaleTimeString()
),
datasets: datasets,
},
legend: {
labels: {
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Severity traps Charts",
fontColor: "white",
},
align: "end",
position: "bottom",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Month",
fontColor: "white",
},
gridLines: {
display: false,
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(0, 0, 0, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
legend: {
labels: {
fontColor: "white",
},
],
yAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Value",
fontColor: "white",
align: "end",
position: "bottom",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Month",
fontColor: "white",
},
gridLines: {
display: false,
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(0, 0, 0, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
gridLines: {
borderDash: [3],
borderDashOffset: [3],
drawBorder: false,
color: "rgba(255, 255, 255, 0.15)",
zeroLineColor: "rgba(33, 37, 41, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
],
yAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Value",
fontColor: "white",
},
gridLines: {
borderDash: [3],
borderDashOffset: [3],
drawBorder: false,
color: "rgba(255, 255, 255, 0.15)",
zeroLineColor: "rgba(33, 37, 41, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
},
],
],
},
},
},
};
};
}
var ctx = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(ctx, config);
}, []);
}, [data]);
return (
<>
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded primary-blue-600">
......@@ -123,12 +132,13 @@ export default function CardLineChart() {
<h6 className="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
Overview
</h6>
<h2 className="text-white text-xl font-semibold">Severity traps Charts</h2>
<h2 className="text-white text-xl font-semibold">
Severity traps Charts
</h2>
</div>
</div>
</div>
<div className="p-4 flex-auto">
{/* Chart */}
<div className="relative h-350-px">
<canvas id="line-chart"></canvas>
</div>
......@@ -136,4 +146,4 @@ export default function CardLineChart() {
</div>
</>
);
}
\ No newline at end of file
}
packages/admin/src/features/dashboard/card-users.tsx
View file @ 37dd1624
import React from "react";
import React, {useState, useEffect} from "react";
import FmsTable from "../../../../shared-library/src/tables/fms-table";
// import { DataSource } from "../show-users/data-source";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
import { useRouter } from "next/router";
// components
import { getAllUsers, deleteUser } from "@/src/services/user-service";
import { useCookies } from "react-cookie";
export default function CardUsers() {
const Columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'username', dataIndex: 'username', key: 'username' },
{ title: 'role', dataIndex: 'role', key: 'role' },
];
const { t } = useTranslation(TranslationFiles.COMMON);
const router = useRouter();
const [data, setData] = useState([]);
const [cookies] = useCookies([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await getAllUsers(cookies["token"], cookies["role"]);
setData(response);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);
return (
<>
<div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
{/* <div className="rounded-t mb-0 px-4 py-3 border-0"> */}
{/* <div className="flex flex-wrap items-center"> */}
{/* <div className="relative w-full px-4 max-w-full flex-grow flex-1">
<h3 className="font-semibold text-base text-blueGray-700">
Page visits
</h3>
</div> */}
{/* </div> */}
{/* </div> */}
<div className="block w-full overflow-x-auto">
<div className=" w-full px-4 max-w-full flex-grow flex-1 text-right">
<FmsButton
......@@ -40,16 +43,15 @@ export default function CardUsers() {
{"See all".toUpperCase()}
</FmsButton>
</div>
{/* <FmsTable
<FmsTable
title={"users"}
columns={Columns}
data={DataSource}
data={data}
pageSizeOptions={["3", "5", "7"]}
defaultPageSize={3}
// t={t}
// setData={setData}
// setColumns={setColumns}
/> */}
className={"dash-table"}
scroll={{ x: false }}
/>
</div>
</div>
</>
......
packages/admin/src/features/show-users/index.tsx
View file @ 37dd1624
......@@ -18,7 +18,6 @@ const [modalProps, setModalProps] = useState({
const [data, setData] = useState([]);
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
const [cookies] = useCookies([]);
// Fetch data when the component mounts using useEffect
useEffect(() => {
const fetchData = async () => {
try {
......
packages/admin/src/services/traps-service.tsx
View file @ 37dd1624
......@@ -2,7 +2,7 @@ import axios from "axios";
import {TrapURL} from "../data/constant/app-constant";
export const fetchData = async (token:any) => {
try {
const response = await axios.get(TrapURL,{
const response = await axios.get(TrapURL+"/data",{
headers: {
Authorization: `Bearer ${token}`,
},
......@@ -24,4 +24,17 @@ export const fetchData = async (token:any) => {
} catch (error) {
console.log(error);
}
};
export const getSeverityStatistics = async (token:any) => {
try {
const response = await axios.get(TrapURL+ "/severity-statistics",{
headers: {
Authorization: `Bearer ${token}`,
},
});
// console.log("response: "+response);
return response.data;
} catch (error) {
console.log(error);
}
};
\ No newline at end of file
packages/shared-library/globals.css
View file @ 37dd1624
......@@ -134,3 +134,6 @@
line-height: 20px !important;
color: var(--primary-gray-600) !important;
}
.dash-table{
width: fit-content;
}
\ No newline at end of file
packages/shared-library/src/tables/fms-table.tsx
View file @ 37dd1624
......@@ -15,6 +15,8 @@ interface fmsTableProps {
rowSelection:any;
pageSizeOptions:Array<string>;
defaultPageSize:any;
className?: string;
scroll?: any;
}
const FmsTable: FunctionComponent<fmsTableProps> = ({
title,
......@@ -26,8 +28,10 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
rowSelection,
pageSizeOptions,
defaultPageSize,
className,
scroll
}) => {
const combinedClassName = `fms-table ${className || ""}`;
return (
<div data-testid="fms-table">
<div className={classes.tableTitleContainer}>
......@@ -46,7 +50,7 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
dataSource={data}
rowSelection = {rowSelection}
bordered
scroll={{ x: 1000 }}
scroll={{ x: scroll }}
pagination={{ position: ['bottomLeft'],
pageSizeOptions: pageSizeOptions,
showSizeChanger: true, locale: { items_per_page: "" },
......
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