事件列表，命名空间列头增加 filter 筛选功能

ui/src/components/EventsTable/index.tsx

@@ -27,118 +27,17 @@ interface EventsTableProps {
   cardType?: 'card' | 'proCard';
   collapsible?: boolean;
   defaultExpand?: boolean;
+  overView?: boolean; // 多个资源需要加上fiilter
   name?: string;
 }
 
-const columns: ColumnsType<DataType> = [
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.Namespace',
-      defaultMessage: '命名空间',
-    }),
-    dataIndex: 'namespace',
-    key: 'namespace',
-    width: 120,
-    render: (text) => <span>{text}</span>,
-  },
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.Type',
-      defaultMessage: '类型',
-    }),
-    dataIndex: 'type',
-    key: 'type',
-    filters: [
-      {
-        text: intl.formatMessage({
-          id: 'OBDashboard.components.EventsTable.Normal',
-          defaultMessage: '正常',
-        }),
-        value: 'Normal',
-      },
-      {
-        text: intl.formatMessage({
-          id: 'OBDashboard.components.EventsTable.Warning',
-          defaultMessage: '警告',
-        }),
-        value: 'Warning',
-      },
-    ],
-
-    onFilter: (value: any, record) => {
-      return record.type === value;
-    },
-    render: (text) => {
-      const value = findByValue(EVENTSTABLE_STATUS_LIST, text);
-      return <Tag color={value.badgeStatus}>{value.label}</Tag>;
-    },
-    width: 120,
-  },
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.NumberOfOccurrences',
-      defaultMessage: '发生次数',
-    }),
-    dataIndex: 'count',
-    key: 'count',
-    width: 130,
-  },
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.FirstOccurrenceTime',
-      defaultMessage: '第一次发生时间',
-    }),
-    dataIndex: 'firstOccur',
-    key: 'firstOccur',
-    width: 210,
-  },
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.RecentOccurrenceTime',
-      defaultMessage: '最近发生时间',
-    }),
-    dataIndex: 'lastSeen',
-    key: 'lastSeen',
-    width: 210,
-  },
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.Cause',
-      defaultMessage: '原因',
-    }),
-    dataIndex: 'reason',
-    key: 'reason',
-    width: 160,
-    render: (text) => <span>{text || '-'}</span>,
-  },
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.AssociatedObjects',
-      defaultMessage: '关联对象',
-    }),
-    dataIndex: 'object',
-    key: 'object',
-    width: 150,
-    render: (val) => <CustomTooltip text={val} width={120} />,
-  },
-  {
-    title: intl.formatMessage({
-      id: 'OBDashboard.components.EventsTable.Information',
-      defaultMessage: '信息',
-    }),
-    dataIndex: 'message',
-    key: 'message',
-    width: 220,
-    render: (val) => <CustomTooltip text={val} width={200} />,
-  },
-];
-
 export default function EventsTable({
   objectType,
   cardType,
   collapsible = false,
   defaultExpand = false,
   name,
+  overView,
 }: EventsTableProps) {
   const defaultParams: API.EventParams = {};
   if (objectType) {
@@ -175,6 +74,131 @@ export default function EventsTable({
     );
   };
 
+  const namespaceList = data?.map((item) => ({
+    text: item.namespace,
+    value: item.namespace,
+  }));
+
+  const namespaceFilterList = namespaceList?.reduce((prev, curr) => {
+    const found = prev.find(
+      (item) => item.text === curr.text && item.value === curr.value,
+    );
+    return found ? prev : [...prev, curr];
+  }, []);
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.Namespace',
+        defaultMessage: '命名空间',
+      }),
+      dataIndex: 'namespace',
+      key: 'namespace',
+      width: 120,
+
+      ...(overView
+        ? {
+            filters: namespaceFilterList,
+            onFilter: (value: any, record) => {
+              return record.namespace === value;
+            },
+          }
+        : {}),
+
+      render: (text) => <span>{text}</span>,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.Type',
+        defaultMessage: '类型',
+      }),
+      dataIndex: 'type',
+      key: 'type',
+      filters: [
+        {
+          text: intl.formatMessage({
+            id: 'OBDashboard.components.EventsTable.Normal',
+            defaultMessage: '正常',
+          }),
+          value: 'Normal',
+        },
+        {
+          text: intl.formatMessage({
+            id: 'OBDashboard.components.EventsTable.Warning',
+            defaultMessage: '警告',
+          }),
+          value: 'Warning',
+        },
+      ],
+
+      onFilter: (value: any, record) => {
+        return record.type === value;
+      },
+      render: (text) => {
+        const value = findByValue(EVENTSTABLE_STATUS_LIST, text);
+        return <Tag color={value.badgeStatus}>{value.label}</Tag>;
+      },
+      width: 120,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.NumberOfOccurrences',
+        defaultMessage: '发生次数',
+      }),
+      dataIndex: 'count',
+      key: 'count',
+      width: 130,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.FirstOccurrenceTime',
+        defaultMessage: '第一次发生时间',
+      }),
+      dataIndex: 'firstOccur',
+      key: 'firstOccur',
+      width: 210,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.RecentOccurrenceTime',
+        defaultMessage: '最近发生时间',
+      }),
+      dataIndex: 'lastSeen',
+      key: 'lastSeen',
+      width: 210,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.Cause',
+        defaultMessage: '原因',
+      }),
+      dataIndex: 'reason',
+      key: 'reason',
+      width: 160,
+      render: (text) => <span>{text || '-'}</span>,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.AssociatedObjects',
+        defaultMessage: '关联对象',
+      }),
+      dataIndex: 'object',
+      key: 'object',
+      width: 150,
+      render: (val) => <CustomTooltip text={val} width={120} />,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'OBDashboard.components.EventsTable.Information',
+        defaultMessage: '信息',
+      }),
+      dataIndex: 'message',
+      key: 'message',
+      width: 220,
+      render: (val) => <CustomTooltip text={val} width={200} />,
+    },
+  ];
+
   return (
     <CustomCard
       loading={loading}

ui/src/pages/Cluster/index.tsx

@@ -40,7 +40,7 @@ const ClusterPage: React.FC = () => {
           />
         </Col>
         <Col span={24}>
-          <EventsTable objectType="OBCLUSTER" />
+          <EventsTable objectType="OBCLUSTER" overView={true} />
         </Col>
       </Row>
       <MonitorComp

ui/src/pages/OBProxy/index.tsx

@@ -54,7 +54,7 @@ export default function OBProxy() {
           />
         </Col>
         <Col span={24}>
-          <EventsTable objectType="OBPROXY" />
+          <EventsTable objectType="OBPROXY" overView={true} />
         </Col>
       </Row>
       <MonitorComp

ui/src/pages/Overview/index.tsx

@@ -25,7 +25,7 @@ const OverviewPage: React.FC = () => {
         {access.systemread || access.systemwrite ? (
           <>
             <Col span={24}>
-              <EventsTable />
+              <EventsTable overView={true} />
             </Col>
             <NodesTable />
           </>

ui/src/pages/Tenant/index.tsx

@@ -70,7 +70,11 @@ export default function TenantPage() {
           />
         </Col>
         <Col span={24}>
-          <EventsTable objectType="OBTENANT" collapsible={false} />
+          <EventsTable
+            objectType="OBTENANT"
+            collapsible={false}
+            overView={true}
+          />
         </Col>
       </Row>
       <MonitorComp