Bar chart

public/_redirects

@@ -1 +1,3 @@
-/* /index.html 200
+/* /index.html 200
+
+/* http://13.60.91.11:8000/api/v1/ 200

src/components/dashboard/default/TabCard/SecurityEventsTable.tsx

@@ -1,7 +1,7 @@
 import { Table, Tag, TagProps } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ExpandedRow } from './ExpandedRow';
-import { MismatchesItem } from '../../../../types/default';
+import { MismatchesItem, MismatchesResponse } from '../../../../types/default';
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const EVENT_COLUMNS: ColumnsType<MismatchesItem> = [
@@ -49,16 +49,22 @@ export const EVENT_COLUMNS: ColumnsType<MismatchesItem> = [
   },
 ];
 
+interface SecurityEventsTableProps {
+  data: MismatchesResponse;
+  loading: boolean;
+  onPageChange?: (page: number, pageSize: number) => void;
+  currentPage?: number;
+}
+
 export const SecurityEventsTable = ({
   data,
   loading,
-}: {
-  data: MismatchesItem[];
-  loading: boolean;
-}) => {
+  onPageChange,
+  currentPage = 1,
+}: SecurityEventsTableProps) => {
   return (
     <Table
-      dataSource={data}
+      dataSource={data.results}
       columns={EVENT_COLUMNS}
       rowKey="id"
       expandable={{
@@ -67,9 +73,12 @@ export const SecurityEventsTable = ({
       className="overflow-scroll"
       loading={loading}
       pagination={{
+        current: currentPage,
         pageSize: 10,
+        total: data.count,
         showSizeChanger: true,
         pageSizeOptions: ['10', '20', '50', '100'],
+        onChange: onPageChange,
       }}
       locale={{ emptyText: loading ? 'Loading...' : 'No data found' }}
     />

src/components/dashboard/projects/ProjectsTables/ProjectsTable.tsx

@@ -9,16 +9,12 @@ import {
   Typography,
 } from 'antd';
 import { DeviceListData } from '../../../../types/device_list';
-import {
-  AppstoreOutlined,
-  ClusterOutlined,
-  FileTextOutlined,
-} from '@ant-design/icons';
+import { AppstoreOutlined, FileTextOutlined } from '@ant-design/icons';
 import { ColumnType } from 'antd/es/table';
 
 const COLUMNS = (
-  onAppListClick: (deviceId: number) => void,
-  onTreeClick: (deviceId: number) => void
+  onAppListClick: (deviceId: number) => void
+  // onTreeClick: (deviceId: number) => void
 ): ColumnType<DeviceListData>[] => [
   {
     title: 'Name',
@@ -117,7 +113,7 @@ const COLUMNS = (
           </Button>
         </Tooltip>
 
-        <Tooltip title="View process tree">
+        {/* <Tooltip title="View process tree">
           <Button
             size="small"
             icon={<ClusterOutlined />}
@@ -132,7 +128,7 @@ const COLUMNS = (
           >
             Tree
           </Button>
-        </Tooltip>
+        </Tooltip> */}
       </Space>
     ),
   },
@@ -149,13 +145,13 @@ export const DeviceListTable = ({
   data,
   loading,
   onAppListClick,
-  onTreeClick,
+  // onTreeClick,
   ...others
 }: Props) => {
   return (
     <Table
       dataSource={data}
-      columns={COLUMNS(onAppListClick, onTreeClick)}
+      columns={COLUMNS(onAppListClick)}
       className="overflow-scroll"
       loading={loading}
       rowKey="pk"

src/layouts/app/SideNav.tsx

@@ -1,14 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ConfigProvider, Layout, Menu, MenuProps, SiderProps } from 'antd';
 import {
-  InfoCircleOutlined,
   LaptopOutlined,
   OrderedListOutlined,
   PieChartOutlined,
 } from '@ant-design/icons';
 import { Logo } from '../../components';
 import { Link, useLocation } from 'react-router-dom';
-import { PATH_DASHBOARD, PATH_LANDING, PATH_SITEMAP } from '../../constants';
+import { PATH_DASHBOARD, PATH_LANDING } from '../../constants';
 import { COLOR } from '../../App.tsx';
 
 const { Sider } = Layout;
@@ -74,11 +73,11 @@ const items: MenuProps['items'] = [
   //   'about',
   //   <BranchesOutlined />
   // ),
-  getItem(
-    <Link to={PATH_SITEMAP.root}>Rules</Link>,
-    'sitemap',
-    <InfoCircleOutlined />
-  ),
+  // getItem(
+  //   <Link to={PATH_SITEMAP.root}>Rules</Link>,
+  //   'sitemap',
+  //   <InfoCircleOutlined />
+  // ),
 
   // getItem('Pages', 'pages', null, [], 'group'),
 

src/pages/dashboards/Default.tsx

@@ -129,8 +129,8 @@ export const DefaultDashboardPage = () => {
   const [deviceData, setDeviceData] = useState<DeviceListData[]>([]);
   const [mismatchesData, setMismatchesData] = useState<MismatchesResponse>({
     count: 0,
-    next: null,
-    previous: null,
+    next: '',
+    previous: '',
     results: [],
   });
   const [filteredData, setFilteredData] = useState<MismatchesItem[]>([]);
@@ -139,9 +139,41 @@ export const DefaultDashboardPage = () => {
   const [error, setError] = useState<ReactNode | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+  });
+
+  // pagination
   useEffect(() => {
-    if (!mismatchesData?.results) return;
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        const data = await fetchMismatchesTable(
+          pagination.current,
+          pagination.pageSize
+        );
+        setMismatchesData(
+          Array.isArray(data)
+            ? data[0] ?? { count: 0, next: null, previous: null, results: [] }
+            : data
+        );
+        setError(null);
+      } catch (error) {
+        console.error('Fetch error:', error);
+        setError(
+          error instanceof Error ? error.message : 'Failed to load data'
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, [pagination]);
 
+  // filter
+  useEffect(() => {
     if (activeTab === 'all') {
       setFilteredData(mismatchesData.results);
     } else {
@@ -151,6 +183,13 @@ export const DefaultDashboardPage = () => {
     }
   }, [activeTab, mismatchesData]);
 
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({
+      current: page,
+      pageSize: pageSize,
+    });
+  };
+
   // pie 1
   useEffect(() => {
     const loadData = async () => {
@@ -349,7 +388,17 @@ export const DefaultDashboardPage = () => {
               ))}
             </Tabs>
 
-            <SecurityEventsTable data={filteredData} loading={loading} />
+            <SecurityEventsTable
+              data={{
+                count: mismatchesData.count,
+                results: filteredData,
+                next: mismatchesData.next,
+                previous: mismatchesData.previous,
+              }}
+              loading={loading}
+              onPageChange={handlePageChange}
+              currentPage={pagination.current}
+            />
           </Card>
         </Col>
       </Row>

src/service/default.ts

@@ -11,24 +11,32 @@ const api = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
 });
 
-export const fetchBarList = async (): Promise<BarData[]> => {
+export const fetchBarTableList = async (
+  log_id: string
+): Promise<NetworkEvent> => {
   try {
-    const response = await api.get('/elastic/mitra-tags/');
+    const response = await api.get(`/agent/elastic/logs/${log_id}/`);
     console.log(response.data);
     return response.data;
   } catch (error) {
-    console.error('Error fetching device list:', error);
+    console.error('Error fetching device data:', error);
     throw error;
   }
 };
 
-export const fetchMismatchesTable = async (): Promise<MismatchesResponse[]> => {
+export const fetchMismatchesTable = async (
+  page?: number,
+  pageSize?: number
+): Promise<MismatchesResponse> => {
   try {
-    const response = await api.get('/elastic/mismatches/');
-    console.log(response.data);
+    const params = {
+      ...(page && { page }),
+      ...(pageSize && { page_size: pageSize }),
+    };
+    const response = await api.get('/elastic/mismatches/', { params });
     return response.data;
   } catch (error) {
-    console.error('Error fetching device list:', error);
+    console.error('Error fetching mismatches:', error);
     throw error;
   }
 };
@@ -69,3 +77,25 @@ export const fetchMismatchesChart = async (): Promise<
     throw error;
   }
 };
+
+export const fetchBarList = async (): Promise<BarData[]> => {
+  try {
+    const response = await api.get('/elastic/mitra-tags/');
+    console.log(response.data);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching device list:', error);
+    throw error;
+  }
+};
+
+export const fetchBarListTable = async (id: number): Promise<NetworkEvent> => {
+  try {
+    const response = await api.get(`/elastic/mitra-tags/${id}/`);
+    console.log(response.data);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching device data:', error);
+    throw error;
+  }
+};

src/types/default.ts

@@ -4,21 +4,71 @@ export type BarData = {
   log_count: number;
 };
 
-// export interface MismatchesResponse {
-//   count: number;
-//   next: string | null;
-//   previous: string | null;
-//   results: {
-//     id: number;
-//     log_id: string;
-//     device_name: string;
-//     rule: {
-//       id: string;
-//       title: string;
-//       level: string;
-//     };
-//   }[];
-// }
+interface EventDescriptor {
+  Id: number;
+  Version: number;
+  Channel: number;
+  Level: number;
+  Opcode: number;
+  Task: number;
+  Keyword: string;
+}
+
+interface EventHeader {
+  Size: number;
+  HeaderType: number;
+  Flags: number;
+  EventProperty: number;
+  ThreadId: number;
+  ProcessId: number;
+  TimeStamp: number;
+  ProviderId: string;
+  EventDescriptor: EventDescriptor;
+  KernelTime: number;
+  UserTime: number;
+  ActivityId: string;
+}
+
+interface Event {
+  EventHeader: EventHeader;
+  'Task Name': string;
+  RuleName: string;
+  UtcTime: string;
+  ProcessGuid: string;
+  ProcessId: string;
+  Image: string;
+  FileVersion: string;
+  Description: string;
+  Product: string;
+  Company: string;
+  OriginalFileName: string;
+  CommandLine: string;
+  CurrentDirectory: string;
+  User: string;
+  LogonGuid: string;
+  LogonId: string;
+  TerminalSessionId: number;
+  IntegrityLevel: string;
+  Hashes: string;
+  ParentProcessGuid: string;
+  ParentProcessId: string;
+  ParentImage: string;
+  ParentCommandLine: string;
+  ParentUser: string;
+}
+
+interface Log {
+  id: string;
+  EventId: number;
+  Event: Event;
+}
+
+export interface RootObject {
+  tag_id: number;
+  tag: string;
+  log_count: number;
+  logs: Log[];
+}
 
 export interface Rule {
   id: string;