diff --git a/package.json b/package.json index 18f4bbe..8906637 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,6 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@fortawesome/fontawesome-free": "^6.4.0", - "@mui/icons-material": "^5.14.0", - "@mui/material": "^5.14.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -16,8 +14,11 @@ "@types/node": "^20.2.5", "@types/react": "^18.2.7", "@types/react-dom": "^18.2.4", + "ansi-to-react": "^6.1.6", + "apexcharts": "^3.41.0", "axios": "^1.4.0", "chart.js": "^4.3.0", + "chartjs-plugin-datalabels": "^2.2.0", "formik": "^2.4.1", "localforage": "^1.10.0", "lodash": "^4.17.21", @@ -25,7 +26,8 @@ "mdb-react-ui-kit": "^6.1.0", "moment": "^2.29.4", "react": "^18.2.0", - "react-datepicker": "^4.12.0", + "react-apexcharts": "^1.4.1", + "react-datepicker": "^4.16.0", "react-dom": "^18.2.0", "react-form-stepper": "^2.0.3", "react-fullscreen-loading": "^0.0.4", @@ -33,6 +35,7 @@ "react-pro-sidebar": "^1.1.0-alpha.1", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", + "react-select": "^5.7.4", "sort-by": "^1.2.0", "typescript": "^5.0.4", "web-vitals": "^2.1.4", diff --git a/src/components/icons/Dashboard.tsx b/src/components/icons/Dashboard.tsx index 43d4064..5e6483a 100644 --- a/src/components/icons/Dashboard.tsx +++ b/src/components/icons/Dashboard.tsx @@ -1,10 +1,10 @@ import React from 'react' //@ts-ignore import dashboard from '../../assets/images/dashboard.png'; -const DashobardIcon = () => { +const DashboardIcon = () => { return ( dashboard ) } -export default DashobardIcon \ No newline at end of file +export default DashboardIcon \ No newline at end of file diff --git a/src/components/sidebar/Menu.tsx b/src/components/sidebar/Menu.tsx index 8e9040b..6e64724 100644 --- a/src/components/sidebar/Menu.tsx +++ b/src/components/sidebar/Menu.tsx @@ -3,10 +3,6 @@ export const monitoringItemsConfig = [ label: "Overview", link: "/monitoring/overview", }, - { - label: "Kafka Topics", - link: "/monitoring/kafka-topics", - }, { label: "UCI-API", link: "/monitoring/uci-api", @@ -30,18 +26,10 @@ export const monitoringItemsConfig = [ { label: "Outbound", link: "/monitoring/outbound", - }, - { - label: "Transport-Socket", - link: "/monitoring/transport-socket", } ]; export const logsItemsConfig = [ - { - label: "Kafka Topics", - link: "/monitoring/logs/kafka-topics", - }, { label: "UCI-API", link: "/monitoring/logs/uci-api", @@ -65,9 +53,5 @@ export const logsItemsConfig = [ { label: "Outbound", link: "/monitoring/logs/outbound", - }, - { - label: "Transport-Socket", - link: "/monitoring/logs/transport-socket", } ]; diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index 8d58d36..bd47e03 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -6,14 +6,14 @@ import { MenuItemStyles, SubMenu, } from "react-pro-sidebar"; -import { Link, useNavigate } from "react-router-dom"; +import { Link, useNavigate, useLocation } from "react-router-dom"; import React, { useCallback, useState } from "react"; import { Switch } from "./Switch"; // import { PackageBadges } from './PackageBadges'; // import { Typography } from './Typography'; import { SidebarFooter } from "./SidebarFooter"; import { SidebarHeader } from "./SidebarHeader"; -import DashobardIcon from "../icons/Dashobard"; +import DashboardIcon from "../icons/Dashboard"; import AddIcon from "../icons/AddIcon"; import LogoutIcon from "../icons/LogoutIcon"; import ThemeIcon from "../icons/ThemeIcon"; @@ -48,6 +48,9 @@ const themes = { disabled: { color: "#9fb6cf", }, + active: { + backgroundColor: "#000", + }, }, submenu: { menuContent: "#000", @@ -59,6 +62,9 @@ const themes = { disabled: { color: "#9fb6cf", }, + active: { + backgroundColor: "#000", + }, }, }, dark: { @@ -77,6 +83,9 @@ const themes = { disabled: { color: "#3e5e7e", }, + active: { + backgroundColor: "#000", + }, }, }, }; @@ -102,6 +111,8 @@ export const SidebarComponent: React.FC = ({ const [rtl, setRtl] = useState(false); const [hasImage, setHasImage] = useState(true); const [theme, setTheme] = useState(store?.theme); + const location = useLocation(); + const navigate = useNavigate(); // handle on RTL change event const handleRTLChange = (e: React.ChangeEvent) => { @@ -115,7 +126,6 @@ export const SidebarComponent: React.FC = ({ localStorage.setItem("theme", store?.theme === "dark" ? "light" : "dark"); }; - const navigate = useNavigate(); // handle on image change event const handleImageChange = (e: React.ChangeEvent) => { setHasImage(e.target.checked); @@ -143,7 +153,10 @@ export const SidebarComponent: React.FC = ({ hasImage && !collapsed ? 0.8 : 1 ) : "#0b2948", - ...(active && { backgroundColor: "black" }), + ...(active && { + backgroundColor: "white !important", + color: "white", + }), }), button: { [`&.${menuClasses.disabled}`]: { @@ -156,13 +169,6 @@ export const SidebarComponent: React.FC = ({ ), color: themes[theme].menu.hover.color, }, - "&:active": { - backgroundColor: "#fff", - }, - // [`&.active`]: { - // backgroundColor: "#fff", - // color: "#b6c8d9", - // }, }, label: ({ open }) => ({ fontWeight: open ? 600 : undefined, @@ -219,42 +225,28 @@ export const SidebarComponent: React.FC = ({ style={{ marginBottom: "24px", marginTop: "16px" }} />
- {/*
- - General - -
*/} - - {/* - } - > - } component={}> - Dashboard - - } component={}>Add Bot - - - - */} - - {/*
- - Extra - -
*/} - - }> + {/* }> + + + } + component={} + > + Dashboard + + } + component={} + > + Add Bot + */} + } active={location.pathname === "/"}> = ({ /> } - active + icon={} + active={location.pathname === "/"} component={} + className={location.pathname === "/" ? "active-menu" : ""} > Dashboard } + active={location.pathname === "/add-bot"} component={} + className={ + location.pathname === "/add-bot" ? "active-menu" : "" + } > Add Bot @@ -283,6 +280,9 @@ export const SidebarComponent: React.FC = ({ } + className={ + location.pathname === item.link ? "active-menu" : "" + } > {item.label} @@ -292,6 +292,9 @@ export const SidebarComponent: React.FC = ({ } + className={ + location.pathname === item.link ? "active-menu" : "" + } > {item.label} @@ -299,7 +302,11 @@ export const SidebarComponent: React.FC = ({ - } onClick={onLogout}> + } + onClick={onLogout} + className={location.pathname === "/logout" ? "active-menu" : ""} + > Log Out @@ -307,56 +314,6 @@ export const SidebarComponent: React.FC = ({
- - {/*
-
-
- {broken && ( - - )} -
-
- - React Pro Sidebar - - - React Pro Sidebar provides a set of components for creating high level and - customizable side navigation - - -
- -
-
- setCollapsed(!collapsed)} - label="Collapse" - /> -
- -
- -
- -
- -
- -
- -
-
-
-
*/} ); }; diff --git a/src/components/sidebar/style.css b/src/components/sidebar/style.css index 8dd74d7..85f01e2 100644 --- a/src/components/sidebar/style.css +++ b/src/components/sidebar/style.css @@ -1,15 +1,4 @@ -/* This is for menu item */ -.pro-menu-item a.active { - color: aliceblue !important; /* put any color you want */ - font-weight: 500; -} - -/* This is for submenu item */ -.nav-member .react-slidedown .pro-menu-item a.active { - color: #003642; /* put any color you want */ - font-weight: 500; -} - -.ps-menu-button a:active { - background-color: aliceblue !important; +.active-menu{ + background: aliceblue; + color: black; } diff --git a/src/components/visualisation/bar.tsx b/src/components/visualisation/bar.tsx index 636ed39..27797db 100644 --- a/src/components/visualisation/bar.tsx +++ b/src/components/visualisation/bar.tsx @@ -1,8 +1,7 @@ -import React, { useEffect, useRef } from "react"; -// import Chart from "chart.js"; +import { useEffect, useRef } from "react"; import Chart from 'chart.js/auto'; -export const BarChart = ({ data }) => { +const BarChart = ({ data}) => { const chartRef = useRef(null); useEffect(() => { @@ -33,3 +32,4 @@ export const BarChart = ({ data }) => { return ; }; +export default BarChart; diff --git a/src/components/visualisation/index.tsx b/src/components/visualisation/index.tsx index 3e07c2a..b40ea06 100644 --- a/src/components/visualisation/index.tsx +++ b/src/components/visualisation/index.tsx @@ -1 +1,3 @@ -export * from './bar' \ No newline at end of file +export * from './bar' +export * from './line' +export * from './pie' \ No newline at end of file diff --git a/src/components/visualisation/line.tsx b/src/components/visualisation/line.tsx new file mode 100644 index 0000000..f8b0d2a --- /dev/null +++ b/src/components/visualisation/line.tsx @@ -0,0 +1,35 @@ +import { useEffect, useRef } from "react"; +import Chart from 'chart.js/auto'; + +const LineChart = ({ data }) => { + const chartRef = useRef(null); + + useEffect(() => { + const ctx = chartRef.current.getContext("2d"); + const chart = new Chart(ctx, { + type: "line", + data: data, + options: { + responsive: true, + scales: { + x: { + grid: { + display: false, + }, + }, + y: { + beginAtZero: true + }, + }, + }, + }); + + return () => { + chart.destroy(); + }; + }, [data]); + + return ; +}; + +export default LineChart; diff --git a/src/components/visualisation/pie.tsx b/src/components/visualisation/pie.tsx new file mode 100644 index 0000000..4ebb394 --- /dev/null +++ b/src/components/visualisation/pie.tsx @@ -0,0 +1,70 @@ +import React, { useEffect, useRef } from "react"; +import Chart from "chart.js/auto"; +import useWindowSize from "../../hooks/useWindow"; + +const generateRandomColor = () => { + const letters = "0123456789ABCDEF"; + let color = "#"; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +}; + +const PieChart = ({ data }) => { + const chartRef = useRef(null); + const { height } = useWindowSize(); + + useEffect(() => { + const dynamicColors = data?.labels?.map(() => generateRandomColor()); + + const ctx = chartRef.current.getContext("2d"); + const chart = new Chart(ctx, { + type: "pie", + data: { + labels: data?.labels, + datasets: [ + { + data: data?.datasets[0].data, + backgroundColor: dynamicColors, + }, + ], + }, + options: { + responsive: true, + plugins: { + tooltip: { + callbacks: { + label: (context) => { + const label = data?.labels[context.dataIndex]; + const value = data?.datasets[0].data[context.dataIndex]; + const total = data?.datasets[0].data.reduce((acc, curr) => acc + curr); + const percentage = ((value / total) * 100).toFixed(2); + return `${label}: ${value} (${percentage}%)`; + }, + }, + }, + }, + }, + }); + + return () => { + chart.destroy(); + }; + }, [data]); + + const chartContainerStyle = { + display: "flex", + justifyContent: "center", + alignItems: "center", + maxHeight: `${height - 100}px`, + }; + + return ( +
+ +
+ ); +}; + +export default PieChart;