integration api history alarm and event alarm

src/api/history-value.jsx

@@ -0,0 +1,21 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllHistoryAlarm = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `history/alarm?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+const getAllHistoryEvent = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `history/event?${queryParams.toString()}`,
+    });
+
+    return response.data;
+};
+
+export { getAllHistoryAlarm, getAllHistoryEvent };

src/pages/history/alarm/component/ListHistoryAlarm.jsx

@@ -2,6 +2,7 @@ import React, { memo, useState, useEffect } from 'react';
 import { Button, Row, Col, Card, Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import TableList from '../../../../components/Global/TableList';
+import { getAllHistoryAlarm } from '../../../../api/history-value';
 
 const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
     const columns = [
@@ -16,7 +17,8 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
             title: 'Datetime',
             dataIndex: 'datetime',
             key: 'datetime',
-            width: '10%',
+            width: '15%',
+            // render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
         },
         {
             title: 'Tag Name',
@@ -26,50 +28,78 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
         },
         {
             title: 'Value',
-            dataIndex: 'stat',
+            dataIndex: 'new_val',
-            key: 'stat',
+            key: 'new_val',
             width: '10%',
+            render: (_, record) => Number(record.new_val).toFixed(4),
         },
         {
             title: 'Threshold',
             dataIndex: 'threshold',
             key: 'threshold',
             width: '10%',
+            render: (_, record) => {
+                switch (record.status) {
+                    case 1:
+                        return (
+                            <span>
+                                {record.lim_low + 1} : {record.lim_high - 1}
+                            </span>
+                        );
+                    case 2:
+                        return <span>{`< ${record.lim_low_crash}`}</span>;
+                    case 3:
+                        return (
+                            <span>
+                                {record.lim_low_crash + 1} : {record.lim_low - 1}
+                            </span>
+                        );
+                    case 4:
+                        return (
+                            <span>
+                                {record.lim_high + 1} : {record.lim_high_crash - 1}
+                            </span>
+                        );
+                    case 5:
+                        return <span>{`> ${record.lim_high_crash}`}</span>;
+                    default:
+                        return <span>Undefined</span>;
+                }
+            },
         },
         {
             title: 'Condition',
             dataIndex: 'condition',
             key: 'condition',
             width: '20%',
+            render: (_, record) => (
+                <Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
+                    {record.condition}
+                </Button>
+            ),
         },
         {
             title: 'Stat',
-            dataIndex: 'stat',
+            dataIndex: 'status',
-            key: 'stat',
+            key: 'status',
             width: '5%',
         },
     ];
 
     const [trigerFilter, setTrigerFilter] = useState(false);
 
-    const defaultFilter = { search: '' };
+    const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
 
-    const getAllEventAlarm = async (params) => {
-        return {
-            data: [],
-        };
-    };
-
     const handleSearch = () => {
-        setFormDataFilter({ search: searchValue });
+        setFormDataFilter({ criteria: searchValue });
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter({ search: '' });
+        setFormDataFilter({ criteria: '' });
         setTrigerFilter((prev) => !prev);
     };
 
@@ -113,7 +143,7 @@ const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
                     </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
-                            getData={getAllEventAlarm}
+                            getData={getAllHistoryAlarm}
                             queryParams={formDataFilter}
                             columns={columns}
                             triger={trigerFilter}

src/pages/history/event/component/ListHistoryEvent.jsx

@@ -2,6 +2,7 @@ import React, { memo, useState, useEffect } from 'react';
 import { Button, Row, Col, Card, Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import TableList from '../../../../components/Global/TableList';
+import { getAllHistoryEvent } from '../../../../api/history-value';
 
 const ListHistoryEvent = memo(function ListHistoryEvent(props) {
     const columns = [
@@ -16,7 +17,8 @@ const ListHistoryEvent = memo(function ListHistoryEvent(props) {
             title: 'Datetime',
             dataIndex: 'datetime',
             key: 'datetime',
-            width: '10%',
+            width: '15%',
+            // render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
         },
         {
             title: 'Tag Name',
@@ -25,39 +27,38 @@ const ListHistoryEvent = memo(function ListHistoryEvent(props) {
             width: '40%',
         },
         {
-            title: 'Stat',
+            title: 'Description',
-            dataIndex: 'stat',
+            dataIndex: 'condition',
-            key: 'stat',
+            key: 'condition',
-            width: '5%',
+            width: '20%',
+            render: (_, record) => (
+                <Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
+                    {record.condition}
+                </Button>
+            ),
         },
         {
-            title: 'Description',
+            title: 'Stat',
-            dataIndex: 'description',
+            dataIndex: 'status',
-            key: 'description',
+            key: 'status',
-            width: '15%',
+            width: '5%',
         },
     ];
 
     const [trigerFilter, setTrigerFilter] = useState(false);
 
-    const defaultFilter = { search: '' };
+    const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
 
-    const getAllEventAlarm = async (params) => {
-        return {
-            data: [],
-        };
-    };
-
     const handleSearch = () => {
-        setFormDataFilter({ search: searchValue });
+        setFormDataFilter({ criteria: searchValue });
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter({ search: '' });
+        setFormDataFilter({ criteria: '' });
         setTrigerFilter((prev) => !prev);
     };
 
@@ -101,7 +102,7 @@ const ListHistoryEvent = memo(function ListHistoryEvent(props) {
                     </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
-                            getData={getAllEventAlarm}
+                            getData={getAllHistoryEvent}
                             queryParams={formDataFilter}
                             columns={columns}
                             triger={trigerFilter}