[INLONG-8069][Dashboard] The cluster node list displays status information

inlong-dashboard/src/plugins/sources/defaults/File.ts

@@ -37,6 +37,9 @@ export default class PulsarSource
     rules: [{ required: true }],
     props: values => ({
       disabled: values?.status === 101,
+      showSearch: true,
+      allowClear: true,
+      filterOption: false,
       options: {
         requestTrigger: ['onOpen', 'onSearch'],
         requestService: keyword => ({
@@ -87,17 +90,21 @@ export default class PulsarSource
     ],
     props: values => ({
       disabled: values?.status === 101,
+      showSearch: true,
+      allowClear: true,
+      filterOption: false,
       options: {
         requestTrigger: ['onOpen', 'onSearch'],
-        requestService: {
+        requestService: keyword => ({
           url: '/cluster/node/list',
           method: 'POST',
           data: {
+            keyword,
             parentId: values.clusterId,
             pageNum: 1,
             pageSize: 10,
           },
-        },
+        }),
         requestParams: {
           formatResult: result =>
             result?.list?.map(item => ({

inlong-dashboard/src/ui/locales/cn.json

@@ -702,6 +702,9 @@
   "pages.Clusters.Node.Name": "节点",
   "pages.Clusters.Node.Port": "端口",
   "pages.Clusters.Node.ProtocolType": "协议类型",
+  "pages.Clusters.Node.Status": "状态",
+  "pages.Clusters.Node.Status.Normal": "正常",
+  "pages.Clusters.Node.Status.Timeout": "心跳超时",
   "pages.Clusters.Node.LastModifier": "最后操作",
   "pages.Clusters.Node.Create": "新建节点",
   "pages.Clusters.Node.IpRule": "请输入正确的IP地址",

inlong-dashboard/src/ui/locales/en.json

@@ -702,6 +702,9 @@
   "pages.Clusters.Node.Name": "Node",
   "pages.Clusters.Node.Port": "Port",
   "pages.Clusters.Node.ProtocolType": "Protocol Type",
+  "pages.Clusters.Node.Status": "Status",
+  "pages.Clusters.Node.Status.Normal": "Normal",
+  "pages.Clusters.Node.Status.Timeout": "Timeout",
   "pages.Clusters.Node.LastModifier": "LastModifier",
   "pages.Clusters.Node.Create": "Create",
   "pages.Clusters.Node.IpRule": "Please enter the IP address correctly",

inlong-dashboard/src/ui/pages/Clusters/NodeManage.tsx

@@ -28,6 +28,7 @@ import { useRequest, useLocation } from '@/ui/hooks';
 import NodeEditModal from './NodeEditModal';
 import request from '@/core/utils/request';
 import { timestampFormat } from '@/core/utils';
+import { genStatusTag } from './status';
 
 const getFilterFormContent = defaultValues => [
   {
@@ -129,6 +130,11 @@ const Comp: React.FC = () => {
         title: i18n.t('pages.Clusters.Node.ProtocolType'),
         dataIndex: 'protocolType',
       },
+      {
+        title: i18n.t('pages.Clusters.Node.Status'),
+        dataIndex: 'status',
+        render: text => genStatusTag(text),
+      },
       {
         title: i18n.t('pages.Clusters.Node.LastModifier'),
         dataIndex: 'modifier',

inlong-dashboard/src/ui/pages/Clusters/status.tsx

@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import i18n from '@/i18n';
+import StatusTag, { StatusTagProps } from '@/ui/components/StatusTag';
+
+type StatusProp = {
+  label: string;
+  value: string | number;
+  type: StatusTagProps['type'];
+  icon?: StatusTagProps['icon'];
+};
+
+export const statusList: StatusProp[] = [
+  {
+    label: i18n.t('pages.Clusters.Node.Status.Normal'),
+    value: 1,
+    type: 'success',
+  },
+  {
+    label: i18n.t('pages.Clusters.Node.Status.Timeout'),
+    value: 2,
+    type: 'error',
+  },
+];
+
+export const statusMap = statusList.reduce(
+  (acc, cur) => ({
+    ...acc,
+    [cur.value]: cur,
+  }),
+  {},
+);
+
+export const genStatusTag = (value: StatusProp['value']) => {
+  const item = statusMap[value] || {};
+
+  return <StatusTag type={item.type || 'default'} title={item.label || value} icon={item.icon} />;
+};