feat(master/device-detail && alarm): Enhance device detail page with alarm list and binary sensors integration, update iconfont URLs, and improve alarm confirmation handling

src/pages/Alarm/index.tsx

@@ -1,9 +1,7 @@
+import AlarmUnConfirmButton from '@/components/shared/Alarm/AlarmUnConfirmButton';
 import ThingsFilter from '@/components/shared/ThingFilterModal';
-import { DATE_TIME_FORMAT, DEFAULT_PAGE_SIZE, HTTPSTATUS } from '@/constants';
-import {
-  apiGetAlarms,
-  apiUnconfirmAlarm,
-} from '@/services/master/AlarmController';
+import { DATE_TIME_FORMAT, DEFAULT_PAGE_SIZE } from '@/constants';
+import { apiGetAlarms } from '@/services/master/AlarmController';
 import {
   CloseOutlined,
   DeleteOutlined,
@@ -11,7 +9,7 @@ import {
 } from '@ant-design/icons';
 import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl, useModel } from '@umijs/max';
-import { Button, Flex, message, Popconfirm, Progress, Tooltip } from 'antd';
+import { Button, Flex, message, Progress, Tooltip } from 'antd';
 import moment from 'moment';
 import { useRef, useState } from 'react';
 import AlarmDescription from './components/AlarmDescription';
@@ -26,7 +24,7 @@ const AlarmPage = () => {
   const [messageApi, contextHolder] = message.useMessage();
   const { initialState } = useModel('@@initialState');
   const { currentUserProfile } = initialState || {};
-
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState<boolean>(false);
   const columns: ProColumns<MasterModel.Alarm>[] = [
     {
       title: intl.formatMessage({
@@ -202,65 +200,22 @@ const AlarmPage = () => {
           return (
             <Flex gap={10}>
               {alarm?.confirmed || false ? (
-                <Popconfirm
-                  title={intl.formatMessage({
-                    id: 'master.alarms.unconfirm.body',
-                    defaultMessage:
-                      'Are you sure you want to unconfirm this alarm?',
-                  })}
-                  okText={intl.formatMessage({
-                    id: 'common.yes',
-                    defaultMessage: 'Yes',
-                  })}
-                  cancelText={intl.formatMessage({
-                    id: 'common.no',
-                    defaultMessage: 'No',
-                  })}
-                  onConfirm={async () => {
-                    const body: MasterModel.ConfirmAlarmRequest = {
-                      id: alarm.id,
-                      thing_id: alarm.thing_id,
-                      time: alarm.time,
-                    };
-                    try {
-                      const resp = await apiUnconfirmAlarm(body);
-                      if (resp.status === HTTPSTATUS.HTTP_SUCCESS) {
-                        message.success({
-                          content: intl.formatMessage({
-                            id: 'master.alarms.unconfirm.success',
-                            defaultMessage: 'Confirm alarm successfully',
-                          }),
-                        });
-                        tableRef.current?.reload();
-                      } else if (resp.status === HTTPSTATUS.HTTP_NOTFOUND) {
-                        message.warning({
-                          content: intl.formatMessage({
-                            id: 'master.alarms.not_found',
-                            defaultMessage:
-                              'Alarm has expired or does not exist',
-                          }),
-                        });
-                        tableRef.current?.reload();
-                      } else {
-                        throw new Error('Failed to confirm alarm');
-                      }
-                    } catch (error) {
-                      console.error('Error when unconfirm alarm: ', error);
-                      message.error({
-                        content: intl.formatMessage({
-                          id: 'master.alarms.unconfirm.fail',
-                          defaultMessage: 'Unconfirm alarm failed',
-                        }),
-                      });
-                    }
+                <AlarmUnConfirmButton
+                  alarm={alarm}
+                  message={messageApi}
+                  button={
+                    <Button danger icon={<DeleteOutlined />} size="small">
+                      <FormattedMessage id="master.alarms.unconfirm.title" />
+                    </Button>
+                  }
+                  onFinish={(isReload) => {
+                    if (isReload) tableRef.current?.reload();
                   }}
-                >
-                  <Button danger icon={<DeleteOutlined />} size="small">
-                    <FormattedMessage id="master.alarms.unconfirm.title" />
-                  </Button>
-                </Popconfirm>
+                />
               ) : (
                 <AlarmFormConfirm
+                  isOpen={isConfirmModalOpen}
+                  setIsOpen={setIsConfirmModalOpen}
                   alarm={alarm}
                   message={messageApi}
                   onFinish={(isReload) => {