feat(master/manager/device): Enhance device management with new detail view, API updates, and improved request handling

src/pages/Manager/Device/Detail/components/ThingTitle.tsx

@@ -0,0 +1,34 @@
+import { getBadgeConnection } from '@/components/shared/ThingShared';
+import { useIntl } from '@umijs/max';
+import { Flex, Typography } from 'antd';
+import moment from 'moment';
+const { Text, Title } = Typography;
+const ThingTitle = ({ thing }: { thing: MasterModel.Thing | null }) => {
+  const intl = useIntl();
+  if (thing === null) {
+    return <Text>{intl.formatMessage({ id: 'common.undefined' })}</Text>;
+  }
+
+  const connectionDuration = thing.metadata!.connected
+    ? thing.metadata!.uptime! * 1000
+    : (Math.round(new Date().getTime() / 1000) -
+        thing.metadata!.updated_time!) *
+      1000;
+  return (
+    <Flex gap={10}>
+      <Title level={4} style={{ margin: 0 }}>
+        {thing.name || intl.formatMessage({ id: 'common.undefined' })}
+      </Title>
+      <Flex gap={5} align="center" justify="center">
+        {getBadgeConnection(thing.metadata!.connected || false)}
+        <Text type={thing.metadata?.connected ? undefined : 'secondary'}>
+          {connectionDuration > 0
+            ? moment.duration(connectionDuration).humanize()
+            : ''}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ThingTitle;

src/pages/Manager/Device/Detail/index.tsx

@@ -0,0 +1,90 @@
+import TooltipIconFontButton from '@/components/shared/TooltipIconFontButton';
+import { ROUTER_HOME } from '@/constants/routes';
+import { apiQueryMessage } from '@/services/master/MessageController';
+import { apiGetThingDetail } from '@/services/master/ThingController';
+import { PageContainer } from '@ant-design/pro-components';
+import { history, useModel, useParams } from '@umijs/max';
+import { useEffect, useState } from 'react';
+import ThingTitle from './components/ThingTitle';
+
+const DetailDevicePage = () => {
+  const { thingId } = useParams();
+  const [thing, setThing] = useState<MasterModel.Thing | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { initialState } = useModel('@@initialState');
+  const getThingDetail = async () => {
+    setIsLoading(true);
+    try {
+      const thing = await apiGetThingDetail(thingId || '');
+      setThing(thing);
+    } catch (error) {
+      console.error('Error when get Thing: ', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const getDeviceConfig = async () => {
+    try {
+      const resp = await apiQueryMessage(
+        thing?.metadata?.data_channel_id || '',
+        initialState?.currentUserProfile?.metadata?.frontend_thing_key || '',
+        {
+          offset: 0,
+          limit: 1,
+          subtopic: `config.${thing?.metadata?.type}.node`,
+        },
+      );
+      console.log('Device Config:', resp.messages![0].string_value_parsed);
+    } catch (error) {}
+  };
+  useEffect(() => {
+    if (thingId) {
+      getThingDetail();
+    }
+  }, [thingId]);
+  useEffect(() => {
+    if (thing) {
+      getDeviceConfig();
+    }
+  }, [thing]);
+
+  return (
+    <PageContainer
+      title={isLoading ? 'Loading...' : <ThingTitle thing={thing} />}
+      header={{
+        onBack: () => history.push(ROUTER_HOME),
+        breadcrumb: undefined,
+      }}
+      extra={[
+        <TooltipIconFontButton
+          key="logs"
+          tooltip="Nhật ký"
+          iconFontName="icon-system-diary"
+          shape="circle"
+          size="middle"
+          onClick={() => {}}
+        />,
+        <TooltipIconFontButton
+          key="notifications"
+          tooltip="Thông báo"
+          iconFontName="icon-bell"
+          shape="circle"
+          size="middle"
+          onClick={() => {}}
+        />,
+        <TooltipIconFontButton
+          key="settings"
+          tooltip="Cài đặt"
+          iconFontName="icon-setting-device"
+          shape="circle"
+          size="middle"
+          onClick={() => {}}
+        />,
+      ]}
+    >
+      Thing ID: {thingId}
+    </PageContainer>
+  );
+};
+
+export default DetailDevicePage;