пинг кнопка

frontend/src/pages/WorkObjectDetail.tsx

@@ -3,6 +3,7 @@ import {
   DatabaseOutlined,
   PlayCircleOutlined,
   ThunderboltOutlined,
+  WifiOutlined,
 } from '@ant-design/icons'
 import {
   Breadcrumb,
@@ -23,14 +24,59 @@ import {
   Typography,
   message,
 } from 'antd'
-import { useMemo, useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useDevices, useObject, type DeviceItem } from '../api/objects'
 import { useRacks } from '../api/racks'
-import { useActions, useCreateTask } from '../api/tasks'
+import { useActions, useCreateTask, useTask } from '../api/tasks'
 import { CategoryTag, DeviceStatusBadge } from '../components/StatusBadge'
 import dayjs from 'dayjs'
 
+function PingButton({
+  scope,
+  objId,
+  size = 'small',
+  children,
+}: {
+  scope: object
+  objId: number
+  size?: 'small' | 'middle' | 'large'
+  children?: React.ReactNode
+}) {
+  const [taskId, setTaskId] = useState<string | null>(null)
+  const queryClient = useQueryClient()
+  const createTask = useCreateTask()
+  const { data: task } = useTask(taskId ?? undefined)
+
+  useEffect(() => {
+    if (task && ['success', 'failed', 'partial', 'stale', 'cancelled'].includes(task.status)) {
+      queryClient.invalidateQueries({ queryKey: ['devices', objId] })
+      setTaskId(null)
+    }
+  }, [task?.status, queryClient, objId])
+
+  const handlePing = async () => {
+    try {
+      const t = await createTask.mutateAsync({ type: 'ping', target_scope: scope, params: {} })
+      setTaskId(t.id)
+    } catch {
+      message.error('Ошибка запуска пинга')
+    }
+  }
+
+  return (
+    <Button
+      size={size}
+      loading={createTask.isPending || !!taskId}
+      icon={<WifiOutlined />}
+      onClick={handlePing}
+    >
+      {children}
+    </Button>
+  )
+}
+
 const SERVER_CATEGORIES = new Set(['main_server', 'vm', 'router'])
 const COL_SPAN = 7
 
@@ -158,13 +204,18 @@ export function WorkObjectDetailPage() {
               <Tag style={{ marginLeft: 2 }}>{row.count} устройств</Tag>
               {row.onlineCount > 0 && <Tag color="green">Online: {row.onlineCount}</Tag>}
               {row.rackScope && (
-                <Button
+                <>
-                  size="small"
+                  <PingButton scope={row.rackScope} objId={objId}>
-                  icon={<PlayCircleOutlined />}
+                    Пинг
-                  onClick={() => openTaskModal(row.rackScope!, `Задача: ${row.label}`)}
+                  </PingButton>
-                >
+                  <Button
-                  Задача на группу
+                    size="small"
-                </Button>
+                    icon={<PlayCircleOutlined />}
+                    onClick={() => openTaskModal(row.rackScope!, `Задача: ${row.label}`)}
+                  >
+                    Задача на группу
+                  </Button>
+                </>
               )}
             </Space>
           )
@@ -266,6 +317,9 @@ export function WorkObjectDetailPage() {
         </Col>
         <Col>
           <Space>
+            <PingButton scope={{ type: 'object', id: objId }} objId={objId} size="middle">
+              Пинг объекта
+            </PingButton>
             <Button
               icon={<ThunderboltOutlined />}
               onClick={() => openTaskModal({ type: 'object', id: objId }, 'Задача на весь объект')}