fix: task executor with status "timeout" corrupts page when checking its details (#12467)

### What problem does this PR solve?

In **Admin UI** > **Service Status**, clicking "Show details" on task
executor with status "Timeout" may corrupts page.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/admin/service-status.tsx

@@ -68,6 +68,8 @@ import {
 } from './utils';
 
 import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+
 import ServiceDetail from './service-detail';
 import TaskExecutorDetail from './task-executor-detail';
 

web/src/pages/admin/task-executor-detail.tsx

@@ -1,5 +1,8 @@
 import dayjs from 'dayjs';
+import { isPlainObject } from 'lodash';
 import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+
 import {
   Bar,
   BarChart,
@@ -15,6 +18,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { formatDate, formatTime } from '@/utils/date';
+import ServiceDetail from './service-detail';
 
 interface TaskExecutorDetailProps {
   content?: AdminService.TaskExecutorInfo;
@@ -68,9 +72,15 @@ function CustomAxisTick({ x, y, payload }: any) {
 }
 
 function TaskExecutorDetail({ content }: TaskExecutorDetailProps) {
+  if (!isPlainObject(content)) {
+    return <ServiceDetail content={content} />;
+  }
+
   return (
     <section className="space-y-8">
       {Object.entries(content ?? {}).map(([name, data]) => {
+        console.log(data);
+
         const items = data.map((x) => ({
           ...x,
           done: Math.floor(Math.random() * 100),