Feat/irify/approve some UI ux (#16)

* feat: add scan observability workspace ui

* ux(ssa): simplify project scan entry

* feat: formalize irify report center

* fix: prevent duplicate project rows during scan launch

* refactor(ux): p0+p1 frontend interaction optimizations

remove fake dashboard trends, consolidate 10 API calls into single Promise.all,
add @tanstack/react-query with QueryClientProvider (staleTime 30s),
create useUrlState hook for URL filter persistence,
migrate dashboard and vulnerability list filter options to useQuery,
persist filter state in URL for vulnerability list (6 filters) and project management (4 filters)

* fix: add missing import and extract nested component in scan observability page

* fix: clarify delete and cancel interactions

* refactor(style): migrate scan observability page to irify design tokens

Replace all --obs-* local CSS variables and hardcoded hex colors with
var(--irify-*) global tokens for automatic dark/light theme support.
Add useTheme() hook and isDark className pattern to match other IRify pages.

* refactor(style): redesign scan observability page to match irify dashboard aesthetic

Author: EmbraceAn

package.json

@@ -33,6 +33,7 @@
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@hello-pangea/dnd": "16.5.0",
+        "@tanstack/react-query": "^5.95.0",
         "@uiw/react-md-editor": "3.6.5",
         "@viz-js/viz": "3.7.0",
         "@yakit-libs/color": "^1.0.2",

pnpm-lock.yaml

@@ -99,6 +99,11 @@ const collapsibleNavItems = [
                 label: '节点管理',
                 path: '/node-config/manage',
             },
+            {
+                key: '/node-config/observability',
+                label: '扫描观测',
+                path: '/node-config/observability',
+            },
         ],
     },
     {
@@ -202,6 +207,8 @@ const IRifyLayout: React.FC = () => {
             return ['节点配置', '节点安装'];
         if (path.startsWith('/node-config/manage'))
             return ['节点配置', '节点管理'];
+        if (path.startsWith('/node-config/observability'))
+            return ['节点配置', '扫描观测'];
 
         if (path.startsWith('/system-management/userinfo'))
             return ['系统管理', '用户管理'];

src/App/IRifyLayout.tsx

@@ -16,8 +16,9 @@ import { RuleEditor } from '@/pages/RuleManagement/RuleEditor';
 import SSARiskAudit from '@/pages/SSARiskAudit';
 import TaskList from '@/pages/SSAScanTask/TaskList';
 import IRifyNodeManagePage from '@/pages/NodeManage/IRifyNodeManagePage';
+import IRifyScanObservabilityPage from '@/pages/NodeManage/IRifyScanObservabilityPage';
 import IRifySystemManagementPage from '@/pages/SystemManagement/IRifySystemManagementPage';
-import ReportManage from '@/pages/ReportManage';
+import IRifyReportManagePage from '@/pages/IRifyReportManage';
 import CompileArtifactsPage from '@/pages/CompileArtifacts/CompileArtifactsPage';
 
 import IRifyDashboard from '@/pages/IRifyDashboard';
@@ -110,7 +111,7 @@ const irifyRouters: RouteObject[] = [
             },
             {
                 path: 'reports',
-                element: <ReportManage />,
+                element: <IRifyReportManagePage />,
             },
             {
                 path: 'node-config',
@@ -123,6 +124,10 @@ const irifyRouters: RouteObject[] = [
                         path: 'manage',
                         element: <IRifyNodeManagePage />,
                     },
+                    {
+                        path: 'observability',
+                        element: <IRifyScanObservabilityPage />,
+                    },
                 ],
             },
             {

src/App/routers/irify-routers.tsx

@@ -3,6 +3,7 @@ import type { ResponseData, TableResponseData } from '@/utils/commonTypes';
 import type {
     PostHostAliveDetectionRunRequest,
     QueryPalmNodeParams,
+    ScannerObservabilityOverview,
     TPostNodesDownloadDataRunRequest,
 } from './type';
 import type { Palm } from '@/gen/schema';
@@ -53,10 +54,40 @@ const postHostAliveDetectionRun = (data: {
         ResponseData<TableResponseData<PostHostAliveDetectionRunRequest>>
     >('/task/start/host-alive-detection/run', data);
 
+const getScannerObservabilityOverview = (params?: {
+    task_limit?: number;
+}): Promise<ResponseData<ScannerObservabilityOverview>> =>
+    axios.get<never, ResponseData<ScannerObservabilityOverview>>(
+        '/ssa/observability/scanner/overview',
+        {
+            params,
+        },
+    );
+
+const exportScannerObservabilityDiagnostics = (params?: {
+    task_limit?: number;
+    log_limit?: number;
+    node_id?: string;
+    task_id?: string;
+}): Promise<ResponseData<Blob>> =>
+    axios.get('/ssa/observability/scanner/diagnostics/export', {
+        params,
+        responseType: 'blob',
+        transformResponse: [
+            (data) => ({
+                data,
+                code: 200,
+                msg: '',
+            }),
+        ],
+    });
+
 export {
     getNodeManage,
     postUpdateLocation,
     postNodesDownloadDataRun,
     deleteNodeManage,
     postHostAliveDetectionRun,
+    getScannerObservabilityOverview,
+    exportScannerObservabilityDiagnostics,
 };

src/apis/NodeManageApi/index.ts

@@ -29,9 +29,87 @@ interface PostHostAliveDetectionRunRequest {
     result: Array<string>;
 }
 
+interface ScannerObservabilityRunningTask {
+    node_id: string;
+    task_id: string;
+    root_task_id?: string;
+    sub_task_id?: string;
+    runtime_id?: string;
+    type: string;
+    status: string;
+    wait_ms: number;
+    start_timestamp: number;
+    running_timestamp: number;
+    ddl_timestamp: number;
+    elapsed_ms: number;
+}
+
+interface ScannerObservabilityNode {
+    node_id: string;
+    nickname: string;
+    location: string;
+    external_ip: string;
+    main_addr: string;
+    last_seen_at: number;
+    online: boolean;
+    cpu_percent: number;
+    memory_percent: number;
+    network_upload: number;
+    network_download: number;
+    active_count: number;
+    queue_count: number;
+    capacity: number;
+    recent_avg_wait_ms: number;
+    recent_avg_exec_ms: number;
+    recent_completed_count: number;
+    rpc_error?: string;
+    running_tasks: ScannerObservabilityRunningTask[];
+}
+
+interface ScannerObservabilityRecentTask {
+    task_id: string;
+    project_name: string;
+    scan_batch: number;
+    execute_node: string;
+    status: string;
+    phase: string;
+    progress: number;
+    language: string;
+    source_origin: string;
+    error_message?: string;
+    created_at: number;
+    started_at?: number;
+    finished_at?: number;
+}
+
+interface ScannerObservabilitySummary {
+    total_nodes: number;
+    online_nodes: number;
+    offline_nodes: number;
+    total_capacity: number;
+    total_active: number;
+    total_queued: number;
+    recent_avg_wait_ms: number;
+    recent_avg_exec_ms: number;
+    recent_completed_count: number;
+}
+
+interface ScannerObservabilityOverview {
+    generated_at: number;
+    summary: ScannerObservabilitySummary;
+    nodes: ScannerObservabilityNode[];
+    running_tasks: ScannerObservabilityRunningTask[];
+    recent_tasks: ScannerObservabilityRecentTask[];
+}
+
 export type {
     QueryPalmNodeParams,
     TPostNodesDownloadDataRunRequest,
     NetworkPingTableProp,
     PostHostAliveDetectionRunRequest,
+    ScannerObservabilityRunningTask,
+    ScannerObservabilityNode,
+    ScannerObservabilityRecentTask,
+    ScannerObservabilitySummary,
+    ScannerObservabilityOverview,
 };

src/apis/NodeManageApi/type.ts

@@ -44,6 +44,7 @@ const postSSAProject = (
 // DELETE /ssa/project - 删除项目
 const deleteSSAProject = (params: {
     id: number;
+    delete_mode?: 'config-only' | 'cascade';
 }): Promise<ResponseData<boolean>> =>
     axios.delete<never, ResponseData<boolean>>(`/ssa/project`, { params });
 
@@ -69,9 +70,12 @@ const testGitConnection = (data: {
 const getScanPolicyConfig = (
     signal?: AbortSignal,
 ): Promise<ResponseData<TScanPolicyConfig>> =>
-    axios.get<never, ResponseData<TScanPolicyConfig>>(`/ssa/scan-policy-config`, {
-        signal,
-    });
+    axios.get<never, ResponseData<TScanPolicyConfig>>(
+        `/ssa/scan-policy-config`,
+        {
+            signal,
+        },
+    );
 
 export {
     getSSAProjects,

src/apis/SSAProjectApi/index.ts

@@ -83,6 +83,8 @@ interface TSSAProjectRequest {
 // SSA 项目列表响应类型
 type TSSAProjectListResponse = TableResponseData<TSSAProject>;
 
+export type TSSAProjectDeleteMode = 'config-only' | 'cascade';
+
 // 扫描策略配置类型
 export interface TScanPolicyConfig {
     version?: string;

src/apis/SSAProjectApi/type.ts

@@ -0,0 +1,57 @@
+import axios from '@/utils/axios';
+import type { ResponseData } from '@/utils/commonTypes';
+import type {
+    TSSAReportRecord,
+    TSSAReportRecordCreateRequest,
+    TSSAReportRecordDetail,
+    TSSAReportRecordListAPIResponse,
+    TSSAReportRecordListResponse,
+    TSSAReportRecordQueryParams,
+} from './type';
+
+const normalizeListResponse = (
+    payload?: TSSAReportRecordListAPIResponse['data'],
+): TSSAReportRecordListResponse => ({
+    list: payload?.data || [],
+    pagemeta: {
+        page: payload?.paging?.pagemeta?.page || 1,
+        limit: payload?.paging?.pagemeta?.limit || 20,
+        total: payload?.paging?.pagemeta?.total || 0,
+        total_page: payload?.paging?.pagemeta?.total_page || 1,
+    },
+});
+
+export const querySSAReportRecords = async (
+    params?: TSSAReportRecordQueryParams,
+): Promise<ResponseData<TSSAReportRecordListResponse>> => {
+    const res = await axios.get<never, TSSAReportRecordListAPIResponse>(
+        '/ssa/report-records',
+        {
+            params,
+        },
+    );
+    return {
+        ...res,
+        data: normalizeListResponse(res.data),
+    };
+};
+
+export const createSSAReportRecord = (
+    data: TSSAReportRecordCreateRequest,
+): Promise<ResponseData<TSSAReportRecord>> =>
+    axios.post<never, ResponseData<TSSAReportRecord>>(
+        '/ssa/report-records',
+        data,
+    );
+
+export const fetchSSAReportRecord = (
+    id: number,
+): Promise<ResponseData<TSSAReportRecordDetail>> =>
+    axios.get<never, ResponseData<TSSAReportRecordDetail>>(
+        `/ssa/report-records/${id}`,
+    );
+
+export const deleteSSAReportRecord = (
+    id: number,
+): Promise<ResponseData<boolean>> =>
+    axios.delete<never, ResponseData<boolean>>(`/ssa/report-records/${id}`);