网络安全

简介

网络安全仪表板是一个旨在提供网络影响综合概览的界面，展示网络基础设施中的潜在漏洞和系统状态。该工具采用动态数据可视化方法，呈现交互式图表、图形和表格。

在线预览链接

模板代码链接

文档

布局结构

该模板围绕一个主要的 Home.tsx 组件构建，封装了整个仪表板的功能。它包含了动态搜索栏、用于在表格和图形视图之间切换的标签式界面，以及用于建立 Neo4j 数据库连接的模态框。

代码片段

以下是使用 @tanstack/react-table 演示 React 表格设置的代码片段。

const columns = [
  columnHelper.accessor('Type', {
    header: () => <b>Type</b>,
    cell: (info) => info.getValue(),
    footer: (info) => info.column.id,
  }),
  // Additional columns defined here...
];

const table = useReactTable({
  data,
  columns,
  enableSorting: true,
  getSortedRowModel: getSortedRowModel(),
  getCoreRowModel: getCoreRowModel(),
});

数据集/连接到 Neo4j 数据库

该应用使用名为 networkimpact.json 的静态 JSON 数据集用于演示。它尚未设计为连接 Neo4j 数据库以进行动态数据检索。不过，您可以使用 ConnectionModal 组件来连接 Neo4j 数据库，并实现相应的逻辑，将数据检索到表格中，以取代当前模板使用的静态 JSON。

连接到 Neo4j 数据库

<ConnectionModal
  open={isConnectionModalOpen}
  setOpenConnection={setIsConnectionModalOpen}
  setConnectionStatus={setConnectNeo4j}
/>