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;