完成手动注册服务的UI

dotnetcore · Apr 3, 2022 · 47c1804 · 47c1804
1 parent 083f315
commit 47c1804
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 12 deletions.
diff --git a/AgileConfig.Server.Apisite/Controllers/ServiceController.cs b/AgileConfig.Server.Apisite/Controllers/ServiceController.cs
@@ -33,6 +33,15 @@ public async Task<IActionResult> Add([FromBody] ServiceInfoVM model)
                 throw new ArgumentNullException("model");
             }
 
+            if ((await _serviceInfoService.GetByServiceIdAsync(model.ServiceId)) != null)
+            {
+                return Json(new
+                {
+                    success = false,
+                    message = "该服务已存在"
+                });
+            }
+
             var service = new ServiceInfo();
             service.Ip = model.Ip;
             service.Port = model.Port;

diff --git a/AgileConfig.Server.Apisite/Models/AppVM.cs b/AgileConfig.Server.Apisite/Models/AppVM.cs
@@ -2,8 +2,6 @@
 using System;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
-using System.Linq;
-using System.Threading.Tasks;
 
 namespace AgileConfig.Server.Apisite.Models
 {

diff --git a/AgileConfig.Server.Apisite/Models/ServiceInfoVM.cs b/AgileConfig.Server.Apisite/Models/ServiceInfoVM.cs
@@ -1,16 +1,22 @@
 using System;
 using AgileConfig.Server.Data.Entity;
+using System.ComponentModel.DataAnnotations;
 
 namespace AgileConfig.Server.Apisite.Models;
 
 public class ServiceInfoVM
 {
     public string Id { get; set; }
 
+    [Required(ErrorMessage = "服务Id不能为空")]
+    [MaxLength(100, ErrorMessage = "服务Id长度不能超过100")]
     public string ServiceId { get; set; }
-
+
+    [Required(ErrorMessage = "服务名不能为空")]
+    [MaxLength(100, ErrorMessage = "服务名长度不能超过100")]
     public string ServiceName { get; set; }
-
+
+    [MaxLength(100, ErrorMessage = "IP长度不能超过100")]
     public string Ip { get; set; }
 
     public int? Port { get; set; }
@@ -22,10 +28,14 @@ public class ServiceInfoVM
     public DateTime? RegisterTime { get; set; }
 
     public DateTime? LastHeartBeat { get; set; }
-
+
+    [Required(ErrorMessage = "健康检测模式不能为空")]
+    [MaxLength(10, ErrorMessage = "健康检测模式长度不能超过10位")]
     public string HeartBeatMode { get; set; }
 
+    [MaxLength(2000, ErrorMessage = "检测URL长度不能超过2000")]
     public string CheckUrl { get; set; }
-
+
+    [MaxLength(2000, ErrorMessage = "告警URL长度不能超过2000")]
     public string AlarmUrl { get; set; }
 }
diff --git a/AgileConfig.Server.Data.Entity/ServiceInfo.cs b/AgileConfig.Server.Data.Entity/ServiceInfo.cs
@@ -55,7 +55,7 @@ public class ServiceInfo
         [Column(Name = "last_heart_beat")] 
         public DateTime? LastHeartBeat { get; set; }
 
-        [Column(Name = "heart_beat_mode")] 
+        [Column(Name = "heart_beat_mode",StringLength = 10)] 
         public string HeartBeatMode { get; set; }
 
         [Column(Name = "check_url", StringLength = 2000)]

diff --git a/AgileConfig.Server.IService/IServiceInfoService.cs b/AgileConfig.Server.IService/IServiceInfoService.cs
@@ -8,7 +8,8 @@ namespace AgileConfig.Server.IService
     public interface IServiceInfoService: IDisposable
     {
         Task<ServiceInfo> GetByUniqueIdAsync(string id);
-
+        Task<ServiceInfo> GetByServiceIdAsync(string serviceId);
+
         Task<bool> RemoveAsync(string id);
 
         Task UpdateServiceStatus(ServiceInfo service, ServiceAlive status);

diff --git a/AgileConfig.Server.Service/ServiceInfoService.cs b/AgileConfig.Server.Service/ServiceInfoService.cs
@@ -29,6 +29,13 @@ public async Task<ServiceInfo> GetByUniqueIdAsync(string id)
             return entity;
         }
 
+        public async Task<ServiceInfo> GetByServiceIdAsync(string serviceId)
+        {
+            var entity = await FreeSQL.Instance.Select<ServiceInfo>().Where(x => x.ServiceId == serviceId).FirstAsync();
+
+            return entity;
+        }
+
         public async Task<bool> RemoveAsync(string id)
         {
             var aff = await FreeSQL.Instance.Delete<ServiceInfo>().Where(x => x.Id == id)

diff --git a/AgileConfig.Server.UI/react-ui-antd/src/pages/Services/index.tsx b/AgileConfig.Server.UI/react-ui-antd/src/pages/Services/index.tsx
@@ -1,11 +1,44 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { FormInstance, ModalForm, ProFormDependency, ProFormSelect, ProFormText } from '@ant-design/pro-form';
 import { PageContainer } from '@ant-design/pro-layout';
 import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
-import React, {  useRef } from 'react';
-import { queryService } from './service';
+import { Button, message } from 'antd';
+import React, {  useRef, useState } from 'react';
+import { getIntl, getLocale } from 'umi';
+import { ServiceItem } from './data';
+import { addService, queryService } from './service';
 
+const handleAdd = async (fields: ServiceItem) => {
+  const intl = getIntl(getLocale());
+  const hide = message.loading(intl.formatMessage({
+    id:'saving'
+  }));
+  try {
+    const result = await addService({ ...fields });
+    hide();
+    const success = result.success;
+    if (success) {
+      message.success(intl.formatMessage({
+        id:'save_success'
+      }));
+    } else {
+      message.error(result.message);
+    }
+    return success;
+  } catch (error) {
+    hide();
+    message.error(intl.formatMessage({
+      id:'save_fail'
+    }));
+    return false;
+  }
+};
 
 const services: React.FC = () => {
   const actionRef = useRef<ActionType>();
+  const addFormRef = useRef<FormInstance>();
+  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
+
   const columns: ProColumns[] = [
     {
       title: '服务ID',
@@ -37,13 +70,13 @@ const services: React.FC = () => {
       hideInSearch: true,
     },
     {
-      title: '检测URL',
+      title: '检测 URL',
       dataIndex: 'checkUrl',
       hideInSearch: true,
       ellipsis: true,
     },
     {
-      title: '告警URL',
+      title: '告警 URL',
       dataIndex: 'alarmUrl',
       hideInSearch: true,
       ellipsis: true,
@@ -102,7 +135,139 @@ const services: React.FC = () => {
           console.log(sortField, ascOrDesc);
           return queryService({ sortField, ascOrDesc, ...params })
         }}
+        toolBarRender={()=>
+          [
+            <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => { setCreateModalVisible(true) }}>
+              手工注册
+            </Button>
+          ]
+        }
       />
+      <ModalForm
+        formRef={addFormRef}
+        title='手工注册服务'
+        visible={createModalVisible}
+        onVisibleChange={setCreateModalVisible}
+        onFinish={
+          async (value) => {
+            const success = await handleAdd(value as ServiceItem);
+            if (success) {
+              setCreateModalVisible(false);
+              if (actionRef.current) {
+                actionRef.current.reload();
+              }
+            }
+            addFormRef.current?.resetFields();
+          }
+        }
+      >
+        <ProFormText
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+          label='服务ID'
+          name="serviceId"
+        />
+        <ProFormText
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+          label='服务名'
+          name="serviceName"
+        />
+        <ProFormSelect
+                rules={[
+                  {
+                    required: true,
+                  },
+                ]}
+                 tooltip={
+                   ()=>{
+                     return <div>
+                       none: 该模式不会进行任何健康检测服务会永远在线<br/>
+                       client: 客户端主动上报<br/>
+                       server: 服务端主动检测
+                     </div>
+                   }
+                 }
+                  label="健康检测模式"
+                  name="heartBeatMode"
+                  request={ async () => {
+                    return [
+                      {
+                        label:'none',
+                        value: 'none',
+                      },
+                      {
+                        label:'client',
+                        value: 'client'
+                      },
+                      {
+                        label:'server',
+                        value: 'server'
+                      }
+                    ];
+                  }}
+        >
+        </ProFormSelect>
+        <ProFormText
+          rules={[
+            {
+            },
+          ]}
+          label='IP'
+          name="ip"
+        />
+        <ProFormText
+          rules={[
+            {
+            },
+          ]}
+          label='端口'
+          name="port"
+        />
+        <ProFormDependency
+          name={
+            ["heartBeatMode"]
+          }
+        >
+          {
+            (e)=>{
+              return e.heartBeatMode == 'server'? <ProFormText
+                  rules={[
+                    {
+                      required: true,
+                    },
+                  ]}
+                  label='检测 URL'
+                  name="checkUrl"
+                />: null
+            }
+          }
+        </ProFormDependency>
+        <ProFormDependency
+          name={
+            ["heartBeatMode"]
+          }
+        >
+          {
+            (e)=>{
+              return (e.heartBeatMode == 'none' || e.heartBeatMode == null)? null:<ProFormText
+                  rules={[
+                    {
+                    },
+                  ]}
+                  label='告警 URL'
+                  name="alarmUrl"
+                />
+            }
+          }
+        </ProFormDependency>
+      </ModalForm>
     </PageContainer>
   );
 }

diff --git a/AgileConfig.Server.UI/react-ui-antd/src/pages/Services/service.ts b/AgileConfig.Server.UI/react-ui-antd/src/pages/Services/service.ts
@@ -1,4 +1,5 @@
 import request from '@/utils/request';
+import { ServiceItem } from './data';
 
 export async function queryService(params: any) {
   return request('/service/search', {
@@ -23,4 +24,13 @@ export async function clientOffline(address: string, clientId: string) {
       clientId
     }
   });
+}
+
+export async function addService(service: ServiceItem) {
+  return request('/service/add', {
+    method: 'POST',
+    data:{
+      ...service
+    }
+  });
 }