diff --git a/frontend/src/components/Analytics.jsx b/frontend/src/components/Analytics.jsx new file mode 100644 index 00000000..341817c0 --- /dev/null +++ b/frontend/src/components/Analytics.jsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import Grid from "@mui/material/Grid"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import CustomizedDataGrid from "./CustomizedDataGrid"; + +export default function Analytics() { + return ( + + + Details + + + + + + + + ); +} diff --git a/frontend/src/components/Chat.jsx b/frontend/src/components/Chat.jsx new file mode 100644 index 00000000..e3b43164 --- /dev/null +++ b/frontend/src/components/Chat.jsx @@ -0,0 +1,17 @@ +import { Stack } from "@mui/material"; + +export default function Chat() { + return ( + +

Chat

+ + ); +} diff --git a/frontend/src/components/CustomDatePicker.jsx b/frontend/src/components/CustomDatePicker.jsx new file mode 100644 index 00000000..6498448f --- /dev/null +++ b/frontend/src/components/CustomDatePicker.jsx @@ -0,0 +1,59 @@ +import * as React from "react"; +import dayjs, { Dayjs } from "dayjs"; +import Button from "@mui/material/Button"; +import CalendarTodayRoundedIcon from "@mui/icons-material/CalendarTodayRounded"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; +import { DatePicker } from "@mui/x-date-pickers/DatePicker"; + +function ButtonField(props) { + const { + setOpen, + label, + id, + disabled, + InputProps: { ref } = {}, + inputProps: { "aria-label": ariaLabel } = {}, + } = props; + + return ( + + ); +} + +export default function CustomDatePicker() { + const [value, setValue] = React.useState(dayjs(new Date())); + const [open, setOpen] = React.useState(false); + + return ( + + setValue(newValue)} + slots={{ field: ButtonField }} + slotProps={{ + field: { setOpen }, + nextIconButton: { size: "small" }, + previousIconButton: { size: "small" }, + }} + open={open} + onClose={() => setOpen(false)} + onOpen={() => setOpen(true)} + views={["day", "month", "year"]} + /> + + ); +} diff --git a/frontend/src/components/CustomizedDataGrid.jsx b/frontend/src/components/CustomizedDataGrid.jsx new file mode 100644 index 00000000..fba0a74c --- /dev/null +++ b/frontend/src/components/CustomizedDataGrid.jsx @@ -0,0 +1,48 @@ +import * as React from "react"; +import { DataGrid } from "@mui/x-data-grid"; +import { columns, rows } from "./internals/data/gridData"; + +export default function CustomizedDataGrid() { + return ( + + params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd" + } + initialState={{ + pagination: { paginationModel: { pageSize: 20 } }, + }} + pageSizeOptions={[10, 20, 50]} + // disableColumnResize + density="compact" + slotProps={{ + filterPanel: { + filterFormProps: { + logicOperatorInputProps: { + variant: "outlined", + size: "small", + }, + columnInputProps: { + variant: "outlined", + size: "small", + sx: { mt: "auto" }, + }, + operatorInputProps: { + variant: "outlined", + size: "small", + sx: { mt: "auto" }, + }, + valueInputProps: { + InputComponentProps: { + variant: "outlined", + size: "small", + }, + }, + }, + }, + }} + /> + ); +} diff --git a/frontend/src/components/CustomizedTreeView.jsx b/frontend/src/components/CustomizedTreeView.jsx new file mode 100644 index 00000000..5a60162a --- /dev/null +++ b/frontend/src/components/CustomizedTreeView.jsx @@ -0,0 +1,183 @@ +import * as React from "react"; +import clsx from "clsx"; +import { animated, useSpring } from "@react-spring/web"; +// import { TransitionProps } from "@mui/material/transitions"; +import Box from "@mui/material/Box"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Collapse from "@mui/material/Collapse"; +import Typography from "@mui/material/Typography"; +import { RichTreeView } from "@mui/x-tree-view/RichTreeView"; +import { unstable_useTreeItem2 as useTreeItem2 } from "@mui/x-tree-view/useTreeItem2"; +import { + TreeItem2Content, + TreeItem2IconContainer, + TreeItem2Label, + TreeItem2Root, +} from "@mui/x-tree-view/TreeItem2"; +import { TreeItem2Icon } from "@mui/x-tree-view/TreeItem2Icon"; +import { TreeItem2Provider } from "@mui/x-tree-view/TreeItem2Provider"; +import { useTheme } from "@mui/material/styles"; + +const ITEMS = [ + { + id: "1", + label: "Website", + children: [ + { id: "1.1", label: "Home", color: "green" }, + { id: "1.2", label: "Pricing", color: "green" }, + { id: "1.3", label: "About us", color: "green" }, + { + id: "1.4", + label: "Blog", + children: [ + { id: "1.1.1", label: "Announcements", color: "blue" }, + { id: "1.1.2", label: "April lookahead", color: "blue" }, + { id: "1.1.3", label: "What's new", color: "blue" }, + { id: "1.1.4", label: "Meet the team", color: "blue" }, + ], + }, + ], + }, + { + id: "2", + label: "Store", + children: [ + { id: "2.1", label: "All products", color: "green" }, + { + id: "2.2", + label: "Categories", + children: [ + { id: "2.2.1", label: "Gadgets", color: "blue" }, + { id: "2.2.2", label: "Phones", color: "blue" }, + { id: "2.2.3", label: "Wearables", color: "blue" }, + ], + }, + { id: "2.3", label: "Bestsellers", color: "green" }, + { id: "2.4", label: "Sales", color: "green" }, + ], + }, + { id: "4", label: "Contact", color: "blue" }, + { id: "5", label: "Help", color: "blue" }, +]; + +function DotIcon({ color }) { + return ( + + + + + + ); +} + +const AnimatedCollapse = animated(Collapse); + +function TransitionComponent(props) { + const style = useSpring({ + to: { + opacity: props.in ? 1 : 0, + transform: `translate3d(0,${props.in ? 0 : 20}px,0)`, + }, + }); + + return ; +} + +function CustomLabel({ color, expandable, children, ...other }) { + const theme = useTheme(); + const colors = { + blue: (theme.vars || theme).palette.primary.main, + green: (theme.vars || theme).palette.success.main, + }; + + const iconColor = color ? colors[color] : null; + return ( + + {iconColor && } + + {children} + + + ); +} + +const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { + const { id, itemId, label, disabled, children, ...other } = props; + + const { + getRootProps, + getContentProps, + getIconContainerProps, + getLabelProps, + getGroupTransitionProps, + status, + publicAPI, + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); + + const item = publicAPI.getItem(itemId); + const color = item?.color; + return ( + + + + {status.expandable && ( + + + + )} + + + + {children && ( + + )} + + + ); +}); + +export default function CustomizedTreeView() { + return ( + + + + Product tree + + + + + ); +} diff --git a/frontend/src/components/HighlightedCard.jsx b/frontend/src/components/HighlightedCard.jsx new file mode 100644 index 00000000..940b5fd2 --- /dev/null +++ b/frontend/src/components/HighlightedCard.jsx @@ -0,0 +1,42 @@ +import * as React from "react"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded"; +import InsightsRoundedIcon from "@mui/icons-material/InsightsRounded"; +import useMediaQuery from "@mui/material/useMediaQuery"; +import { useTheme } from "@mui/material/styles"; + +export default function HighlightedCard() { + const theme = useTheme(); + const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); + + return ( + + + + + Explore your data + + + Uncover performance and usage insights with our data analysis tools. + + + + + ); +} diff --git a/frontend/src/components/MainGrid.jsx b/frontend/src/components/MainGrid.jsx new file mode 100644 index 00000000..bdb66f7a --- /dev/null +++ b/frontend/src/components/MainGrid.jsx @@ -0,0 +1,83 @@ +import * as React from "react"; +import Grid from "@mui/material/Grid"; +import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import LogTypeStatus from "./LogTypeStatus"; +import HighlightedCard from "./HighlightedCard"; +import PageViewsBarChart from "./PageViewsBarChart"; +import SessionsChart from "./SessionsChart"; +import StatCard from "./StatCard"; + +const data = [ + { + title: "Total Logs", + value: "14k", + interval: "Last 30 days", + trend: "up", + data: [ + 200, 24, 220, 260, 240, 380, 100, 240, 280, 240, 300, 340, 320, 360, 340, + 380, 360, 400, 380, 420, 400, 640, 340, 460, 440, 480, 460, 600, 880, 920, + ], + }, + { + title: "Error Count", + value: "1.2k", + interval: "Last 30 days", + trend: "down", + data: [ + 1640, 1250, 970, 1130, 1050, 900, 720, 1080, 900, 450, 920, 820, 840, 600, + 820, 780, 800, 760, 380, 740, 660, 620, 840, 500, 520, 480, 400, 360, 300, + 220, + ], + }, + { + title: "Warning Count", + value: "2.5k", + interval: "Last 30 days", + trend: "neutral", + data: [ + 500, 400, 510, 530, 520, 600, 530, 520, 510, 730, 520, 510, 530, 620, 510, + 530, 520, 410, 530, 520, 610, 530, 520, 610, 530, 420, 510, 430, 520, 510, + ], + }, +]; + +export default function MainGrid() { + return ( + + {/* cards */} + + Overview + + theme.spacing(2) }} + > + {data.map((card, index) => ( + + + + ))} + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/components/MenuButton.jsx b/frontend/src/components/MenuButton.jsx new file mode 100644 index 00000000..c7d6f61e --- /dev/null +++ b/frontend/src/components/MenuButton.jsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import Badge, { badgeClasses } from "@mui/material/Badge"; +import IconButton from "@mui/material/IconButton"; + +export default function MenuButton({ showBadge = false, ...props }) { + return ( + + + + ); +} diff --git a/frontend/src/components/MenuContent.jsx b/frontend/src/components/MenuContent.jsx new file mode 100644 index 00000000..caa76046 --- /dev/null +++ b/frontend/src/components/MenuContent.jsx @@ -0,0 +1,64 @@ +import * as React from "react"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import Stack from "@mui/material/Stack"; +import HomeRoundedIcon from "@mui/icons-material/HomeRounded"; +import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded"; +import Chat from "@mui/icons-material/Chat"; +import SettingsRoundedIcon from "@mui/icons-material/SettingsRounded"; +import InfoRoundedIcon from "@mui/icons-material/InfoRounded"; +import HelpRoundedIcon from "@mui/icons-material/HelpRounded"; +import { useRecoilState } from "recoil"; +import { activeViewState } from "../utils/state"; + +const mainListItems = [ + { text: "Home", icon: }, + { text: "Analytics", icon: }, + { text: "Chat", icon: }, + // { text: "Tasks", icon: }, +]; + +const secondaryListItems = [ + { text: "Settings", icon: }, + { text: "About", icon: }, + { text: "Feedback", icon: }, +]; + +export default function MenuContent() { + const [_, setActiveView] = useRecoilState(activeViewState); + const [activeIndex, setActiveIndex] = React.useState(0); + + return ( + + + {mainListItems.map((item, index) => ( + + { + setActiveIndex(index); + setActiveView(item.text.toLowerCase()); + }} + > + {item.icon} + + + + ))} + + + {secondaryListItems.map((item, index) => ( + + + {item.icon} + + + + ))} + + + ); +} diff --git a/frontend/src/components/OptionsMenu.jsx b/frontend/src/components/OptionsMenu.jsx new file mode 100644 index 00000000..989895bb --- /dev/null +++ b/frontend/src/components/OptionsMenu.jsx @@ -0,0 +1,79 @@ +import * as React from "react"; +import { styled } from "@mui/material/styles"; +import Divider, { dividerClasses } from "@mui/material/Divider"; +import Menu from "@mui/material/Menu"; +import MuiMenuItem from "@mui/material/MenuItem"; +import { paperClasses } from "@mui/material/Paper"; +import { listClasses } from "@mui/material/List"; +import ListItemText from "@mui/material/ListItemText"; +import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon"; +import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded"; +import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; +import MenuButton from "./MenuButton"; + +const MenuItem = styled(MuiMenuItem)({ + margin: "2px 0", +}); + +export default function OptionsMenu() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + + + + + + Profile + My account + + Add another account + Settings + + + Logout + + + + + + + ); +} diff --git a/frontend/src/components/PageViewsBarChart.jsx b/frontend/src/components/PageViewsBarChart.jsx new file mode 100644 index 00000000..b3457522 --- /dev/null +++ b/frontend/src/components/PageViewsBarChart.jsx @@ -0,0 +1,83 @@ +import * as React from "react"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Chip from "@mui/material/Chip"; +import Typography from "@mui/material/Typography"; +import Stack from "@mui/material/Stack"; +import { BarChart } from "@mui/x-charts/BarChart"; +import { useTheme } from "@mui/material/styles"; + +export default function PageViewsBarChart() { + const theme = useTheme(); + const colorPalette = [ + (theme.vars || theme).palette.primary.dark, + (theme.vars || theme).palette.primary.main, + (theme.vars || theme).palette.primary.light, + ]; + return ( + + + + Analyzed Logs + + + + + 12K + + + + + Logs analyzed in the last 30 days + + + + + + ); +} diff --git a/frontend/src/components/SessionsChart.jsx b/frontend/src/components/SessionsChart.jsx new file mode 100644 index 00000000..42f7dcc1 --- /dev/null +++ b/frontend/src/components/SessionsChart.jsx @@ -0,0 +1,150 @@ +import * as React from "react"; +import { useTheme } from "@mui/material/styles"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Chip from "@mui/material/Chip"; +import Typography from "@mui/material/Typography"; +import Stack from "@mui/material/Stack"; +import { LineChart } from "@mui/x-charts/LineChart"; + +function AreaGradient({ color, id }) { + return ( + + + + + + + ); +} + +function getDaysInMonth(month, year) { + const date = new Date(year, month, 0); + const monthName = date.toLocaleDateString("en-US", { + month: "short", + }); + const daysInMonth = date.getDate(); + const days = []; + let i = 1; + while (days.length < daysInMonth) { + days.push(`${monthName} ${i}`); + i += 1; + } + return days; +} + +export default function SessionsChart() { + const theme = useTheme(); + const data = getDaysInMonth(4, 2024); + + const colorPalette = [ + theme.palette.primary.light, + theme.palette.primary.main, + theme.palette.primary.dark, + ]; + + return ( + + + + Sessions + + + + + 13,277 + + + + + Sessions per day for the last 30 days + + + (i + 1) % 5 === 0, + }, + ]} + series={[ + { + id: "direct", + label: "Windows", + showMark: false, + curve: "linear", + stack: "total", + area: true, + stackOrder: "ascending", + data: [ + 300, 900, 600, 1200, 1500, 1800, 2400, 2100, 2700, 3000, 1800, + 3300, 3600, 3900, 4200, 4500, 3900, 4800, 5100, 5400, 4800, + 5700, 6000, 6300, 6600, 6900, 7200, 7500, 7800, 8100, + ], + }, + { + id: "referral", + label: "Linux", + showMark: false, + curve: "linear", + stack: "total", + area: true, + stackOrder: "ascending", + data: [ + 500, 900, 700, 1400, 1100, 1700, 2300, 2000, 2600, 2900, 2300, + 3200, 3500, 3800, 4100, 4400, 2900, 4700, 5000, 5300, 5600, + 5900, 6200, 6500, 5600, 6800, 7100, 7400, 7700, 8000, + ], + }, + { + id: "organic", + label: "Error", + showMark: false, + curve: "linear", + stack: "total", + stackOrder: "ascending", + data: [ + 1000, 1500, 1200, 1700, 1300, 2000, 2400, 2200, 2600, 2800, + 2500, 3000, 3400, 3700, 3200, 3900, 4100, 3500, 4300, 4500, + 4000, 4700, 5000, 5200, 4800, 5400, 5600, 5900, 6100, 6300, + ], + area: true, + }, + ]} + height={250} + margin={{ left: 50, right: 20, top: 20, bottom: 20 }} + grid={{ horizontal: true }} + sx={{ + "& .MuiAreaElement-series-organic": { + fill: "url('#organic')", + }, + "& .MuiAreaElement-series-referral": { + fill: "url('#referral')", + }, + "& .MuiAreaElement-series-direct": { + fill: "url('#direct')", + }, + }} + slotProps={{ + legend: { + hidden: true, + }, + }} + > + + + + + + + ); +} diff --git a/frontend/src/components/StatCard.jsx b/frontend/src/components/StatCard.jsx new file mode 100644 index 00000000..ab804e5e --- /dev/null +++ b/frontend/src/components/StatCard.jsx @@ -0,0 +1,115 @@ +import * as React from "react"; +import { useTheme } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Chip from "@mui/material/Chip"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import { SparkLineChart } from "@mui/x-charts/SparkLineChart"; +import { areaElementClasses } from "@mui/x-charts/LineChart"; + +function getDaysInMonth(month, year) { + const date = new Date(year, month, 0); + const monthName = date.toLocaleDateString("en-US", { + month: "short", + }); + const daysInMonth = date.getDate(); + const days = []; + let i = 1; + while (days.length < daysInMonth) { + days.push(`${monthName} ${i}`); + i += 1; + } + return days; +} + +function AreaGradient({ color, id }) { + return ( + + + + + + + ); +} + +export default function StatCard({ title, value, interval, trend, data }) { + const theme = useTheme(); + const daysInWeek = getDaysInMonth(4, 2024); + + const trendColors = { + up: + theme.palette.mode === "light" + ? theme.palette.success.main + : theme.palette.success.dark, + down: + theme.palette.mode === "light" + ? theme.palette.error.main + : theme.palette.error.dark, + neutral: + theme.palette.mode === "light" + ? theme.palette.grey[400] + : theme.palette.grey[700], + }; + + const labelColors = { + up: "success", + down: "error", + neutral: "default", + }; + + const color = labelColors[trend]; + const chartColor = trendColors[trend]; + const trendValues = { up: "+25%", down: "-25%", neutral: "+5%" }; + + return ( + + + + {title} + + + + + + {value} + + + + + {interval} + + + + + + + + + + + ); +} diff --git a/frontend/src/components/internals/data/gridData.jsx b/frontend/src/components/internals/data/gridData.jsx new file mode 100644 index 00000000..99acb855 --- /dev/null +++ b/frontend/src/components/internals/data/gridData.jsx @@ -0,0 +1,421 @@ +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import Chip from "@mui/material/Chip"; + +function renderSeverity(severity) { + const colors = { + ERROR: "error", + WARNING: "warning", + INFO: "info", + SUCCESS: "success", + CRITICAL: "secondary", + }; + + return ; +} + +export function renderAvatar(params) { + if (params.value == null) { + return ""; + } + + return ( + + {params.value.name.toUpperCase().substring(0, 1)} + + ); +} + +export const columns = [ + { field: "id", headerName: "ID", flex: 0.5, minWidth: 50 }, + { field: "timeStamp", headerName: "Timestamp", flex: 1, minWidth: 100 }, + { + field: "severity", + headerName: "Severity", + headerAlign: "center", + align: "center", + flex: 0.7, + minWidth: 40, + renderCell: (params) => renderSeverity(params.value), + }, + { + field: "users", + headerName: "Users", + headerAlign: "center", + align: "center", + flex: 0.7, + minWidth: 40, + }, + { + field: "message", + headerName: "Messages", + headerAlign: "center", + align: "left", + flex: 2, + minWidth: 200, + }, + { + field: "uploadDate", + headerName: "Upload Date", + headerAlign: "left", + align: "left", + flex: 0.5, + minWidth: 120, + }, + { + field: "analyzed", + headerName: "Analyzed", + headerAlign: "center", + align: "center", + flex: 0.5, + minWidth: 100, + }, + { + field: "EventId", + headerName: "Event ID/Process ID", + headerAlign: "left", + align: "left", + flex: 0.5, + minWidth: 100, + }, +]; + +export const rows = [ + { + id: 1, + timeStamp: "2025-04-01 08:15:23", + severity: "ERROR", + users: "dinesh", + message: "System restart initiated", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2456", + logType: "linux-kernel", + }, + { + id: 2, + timeStamp: "2025-04-01 08:16:10", + severity: "WARNING", + users: "aashu", + message: "Memory utilization ERROR", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2457", + logType: "linux-auth", + }, + { + id: 3, + timeStamp: "2025-04-01 08:17:05", + severity: "INFO", + users: "dinesh", + message: "Disk space usage normal", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2458", + logType: "window-app", + }, + { + id: 4, + timeStamp: "2025-04-01 08:20:00", + severity: "Critical", + users: "root", + message: "CPU overload", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2459", + logType: "linux-sys", + }, + { + id: 5, + timeStamp: "2025-04-01 08:22:30", + severity: "ERROR", + users: "aashu", + message: "Network latency detected", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2460", + logType: "linux-kernel", + }, + { + id: 6, + timeStamp: "2025-04-01 08:25:01", + severity: "WARNING", + users: "dinesh", + message: "Firewall access denied", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2461", + logType: "linux-auth", + }, + { + id: 7, + timeStamp: "2025-04-01 08:30:00", + severity: "INFO", + users: "aashu", + message: "System idle", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2462", + logType: "window-app", + }, + { + id: 8, + timeStamp: "2025-04-01 08:35:10", + severity: "ERROR", + users: "dinesh", + message: "Disk ERROR detected", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2463", + logType: "linux-sys", + }, + { + id: 9, + timeStamp: "2025-04-01 08:40:22", + severity: "WARNING", + users: "root", + message: "Software update completed", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2464", + logType: "linux-auth", + }, + { + id: 10, + timeStamp: "2025-04-01 08:45:30", + severity: "Critical", + users: "dinesh", + message: "System shutdown due to power failure", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2465", + logType: "linux-kernel", + }, + { + id: 11, + timeStamp: "2025-04-01 08:50:00", + severity: "INFO", + users: "aashu", + message: "User login detected", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2466", + logType: "window-app", + }, + { + id: 12, + timeStamp: "2025-04-01 09:00:10", + severity: "ERROR", + users: "root", + message: "Disk usage critical", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2467", + logType: "linux-sys", + }, + { + id: 13, + timeStamp: "2025-04-01 09:10:01", + severity: "WARNING", + users: "dinesh", + message: "Memory leak detected", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2468", + logType: "linux-auth", + }, + { + id: 14, + timeStamp: "2025-04-01 09:20:30", + severity: "INFO", + users: "aashu", + message: "System idle", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2469", + logType: "window-app", + }, + { + id: 15, + timeStamp: "2025-04-01 09:25:45", + severity: "Critical", + users: "root", + message: "Unexpected system crash", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2470", + logType: "linux-kernel", + }, + { + id: 16, + timeStamp: "2025-04-01 09:30:00", + severity: "WARNING", + users: "dinesh", + message: "CPU idle", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2471", + logType: "linux-sys", + }, + { + id: 17, + timeStamp: "2025-04-01 09:35:23", + severity: "ERROR", + users: "aashu", + message: "Firewall breach detected", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2472", + logType: "linux-auth", + }, + { + id: 18, + timeStamp: "2025-04-01 09:40:00", + severity: "Critical", + users: "root", + message: "Power supply failure", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2473", + logType: "linux-kernel", + }, + { + id: 19, + timeStamp: "2025-04-01 09:45:15", + severity: "INFO", + users: "dinesh", + message: "Routine system check passed", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2474", + logType: "window-app", + }, + { + id: 20, + timeStamp: "2025-04-01 09:50:40", + severity: "WARNING", + users: "aashu", + message: "Patch update installed", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2475", + logType: "linux-sys", + }, + { + id: 21, + timeStamp: "2025-04-01 09:55:01", + severity: "INFO", + users: "root", + message: "User logout detected", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2476", + logType: "linux-auth", + }, + { + id: 22, + timeStamp: "2025-04-01 10:00:20", + severity: "Critical", + users: "dinesh", + message: "Kernel panic detected", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2477", + logType: "linux-kernel", + }, + { + id: 23, + timeStamp: "2025-04-01 10:10:25", + severity: "WARNING", + users: "aashu", + message: "Network latency issues", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2478", + logType: "linux-sys", + }, + { + id: 24, + timeStamp: "2025-04-01 10:15:10", + severity: "ERROR", + users: "root", + message: "ERROR I/O operations detected", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2479", + logType: "linux-auth", + }, + { + id: 25, + timeStamp: "2025-04-01 10:20:45", + severity: "INFO", + users: "dinesh", + message: "Scheduled task completed", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2480", + logType: "window-app", + }, + { + id: 26, + timeStamp: "2025-04-01 10:30:20", + severity: "ERROR", + users: "aashu", + message: "Security breach detected", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2481", + logType: "linux-kernel", + }, + { + id: 27, + timeStamp: "2025-04-01 10:40:30", + severity: "Critical", + users: "root", + message: "System shutdown due to ERROR", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2482", + logType: "linux-sys", + }, + { + id: 28, + timeStamp: "2025-04-01 10:45:10", + severity: "INFO", + users: "dinesh", + message: "Routine log rotation", + uploadDate: "2025-04-01", + analyzed: false, + EventId: "OS-2483", + logType: "window-app", + }, + { + id: 29, + timeStamp: "2025-04-01 10:50:00", + severity: "WARNING", + users: "aashu", + message: "Memory usage increased", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2484", + logType: "linux-auth", + }, + { + id: 30, + timeStamp: "2025-04-01 10:55:25", + severity: "Critical", + users: "root", + message: "Hard disk failure", + uploadDate: "2025-04-01", + analyzed: true, + EventId: "OS-2485", + logType: "linux-kernel", + }, +]; diff --git a/frontend/src/theme/customizations/index.js b/frontend/src/theme/customizations/index.js new file mode 100644 index 00000000..ef97812c --- /dev/null +++ b/frontend/src/theme/customizations/index.js @@ -0,0 +1,4 @@ +export { chartsCustomizations } from './charts'; +export { dataGridCustomizations } from './dataGrid'; +export { datePickersCustomizations } from './datePickers'; +export { treeViewCustomizations } from './treeView'; diff --git a/frontend/src/utils/state.js b/frontend/src/utils/state.js new file mode 100644 index 00000000..f42a2587 --- /dev/null +++ b/frontend/src/utils/state.js @@ -0,0 +1,6 @@ +import {atom} from 'recoil'; + +export const activeViewState = atom({ + key: 'activeViewState', + default: 'home', +}); \ No newline at end of file