feat: fe add groupName, #269

console/src/main/resources/static/console-fe/package.json

@@ -9,7 +9,6 @@
     "eslint": "eslint --ext .js src/",
     "eslint-fix": "eslint  --ext .js --fix src/"
   },
-  "private": true,
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

console/src/main/resources/static/console-fe/src/locales/en-US.js

@@ -78,6 +78,7 @@ const I18N_CONF = {
     query: 'Search',
     pubNoData: 'No results found.',
     columnServiceName: 'Service Name',
+    groupName: 'Group Name',
     columnClusterCount: 'Cluster Count',
     columnIpCount: 'Instance Count',
     columnHealthyInstanceCount: 'Healthy Instance Count',
@@ -105,31 +106,24 @@ const I18N_CONF = {
     metadata: 'Metadata',
     selector: 'Selector',
     type: 'Type',
-    healthCheckPattern: 'Health check pattern',
+    groupName: 'Group Name',
     protectThreshold: 'Protect Threshold',
     serviceName: 'Service Name',
     editService: 'Edit Service',
-    healthCheckPatternService: 'Service',
-    healthCheckPatternClient: 'Client',
-    healthCheckPatternNone: 'None',
   },
   EditServiceDialog: {
     createService: 'Create Service',
     updateService: 'Edit Service',
     serviceName: 'Service Name',
     metadata: 'Metadata',
+    groupName: 'Group Name',
     type: 'Type',
     typeLabel: 'Label',
     typeNone: 'None',
     selector: 'Selector',
     protectThreshold: 'Protect Threshold',
-    healthCheckPattern: 'Health check pattern',
-    healthCheckPatternService: 'Service',
-    healthCheckPatternClient: 'Client',
-    healthCheckPatternNone: 'None',
     serviceNameRequired: 'Please enter a service name',
     protectThresholdRequired: 'Please enter a protect threshold',
-    healthCheckModeRequired: 'Please select health check pattern',
   },
   InstanceTable: {
     operation: 'Operation',

console/src/main/resources/static/console-fe/src/locales/zh-CN.js

@@ -78,6 +78,7 @@ const I18N_CONF = {
     query: '查询',
     pubNoData: '没有数据',
     columnServiceName: '服务名',
+    groupName: '分组',
     columnClusterCount: '集群数目',
     columnIpCount: '实例数',
     columnHealthyInstanceCount: '健康实例数',
@@ -105,31 +106,24 @@ const I18N_CONF = {
     metadata: '元数据',
     selector: '表达式',
     type: '服务路由类型',
-    healthCheckPattern: '健康检查模式',
+    groupName: '分组',
     protectThreshold: '保护阈值',
     serviceName: '服务名',
     editService: '编辑服务',
-    healthCheckPatternService: '服务端',
-    healthCheckPatternClient: '客户端',
-    healthCheckPatternNone: '禁止',
   },
   EditServiceDialog: {
     createService: '创建服务',
     updateService: '更新服务',
     serviceName: '服务名',
     metadata: '元数据',
+    groupName: '分组',
     type: '服务路由类型',
     typeLabel: '标签',
     typeNone: '默认',
     selector: '表达式',
     protectThreshold: '保护阈值',
-    healthCheckPattern: '健康检查模式',
-    healthCheckPatternService: '服务端',
-    healthCheckPatternClient: '客户端',
-    healthCheckPatternNone: '禁止',
     serviceNameRequired: '请输入服务名',
     protectThresholdRequired: '请输入保护阈值',
-    healthCheckModeRequired: '请选择健康检查模式',
   },
   InstanceTable: {
     operation: '操作',

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js

@@ -35,7 +35,7 @@ class EditServiceDialog extends React.Component {
       isCreate: false,
       editService: {},
       editServiceDialogVisible: false,
-      errors: { name: {}, protectThreshold: {}, healthCheckMode: {} },
+      errors: { name: {}, protectThreshold: {} },
     };
     this.show = this.show.bind(this);
   }
@@ -59,7 +59,6 @@ class EditServiceDialog extends React.Component {
     const helpMap = {
       name: locale.serviceNameRequired,
       protectThreshold: locale.protectThresholdRequired,
-      healthCheckMode: locale.healthCheckModeRequired,
     };
     if (field.protectThreshold === 0) {
       field.protectThreshold = '0';
@@ -77,13 +76,14 @@ class EditServiceDialog extends React.Component {
   onConfirm() {
     const { isCreate } = this.state;
     const editService = Object.assign({}, this.state.editService);
-    const { name, protectThreshold, healthCheckMode, metadataText = '', selector } = editService;
+    const { name, protectThreshold, groupName, metadataText = '', selector } = editService;
     if (!this.validator({ name, protectThreshold })) return;
     request({
       method: isCreate ? 'POST' : 'PUT',
       url: 'v1/ns/service',
       data: {
         serviceName: name,
+        groupName: groupName || 'DEFAULT_GROUP',
         protectThreshold,
         metadata: replaceEnter(METADATA_SEPARATOR)(metadataText),
         selector: JSON.stringify(selector),
@@ -108,7 +108,7 @@ class EditServiceDialog extends React.Component {
   }
 
   onChangeCluster(changeVal) {
-    const resetKey = ['name', 'protectThreshold', 'healthCheckMode'];
+    const resetKey = ['name', 'protectThreshold'];
     const { editService = {} } = this.state;
     const errors = Object.assign({}, this.state.errors);
     resetKey.forEach(key => {
@@ -133,7 +133,7 @@ class EditServiceDialog extends React.Component {
     const {
       name,
       protectThreshold,
-      healthCheckMode,
+      groupName,
       metadataText,
       selector = { type: 'none' },
     } = editService;
@@ -171,22 +171,14 @@ class EditServiceDialog extends React.Component {
               onChange={protectThreshold => this.onChangeCluster({ protectThreshold })}
             />
           </Form.Item>
-          {/* <Form.Item
-            required
-            {...formItemLayout}
-            label={`${locale.healthCheckPattern}:`}
-            {...errors.healthCheckMode}
-          >
-            <Select
-              className="full-width"
-              defaultValue={healthCheckMode}
-              onChange={healthCheckMode => this.onChangeCluster({ healthCheckMode })}
-            >
-              <Select.Option value="server">{locale.healthCheckPatternService}</Select.Option>
-              <Select.Option value="client">{locale.healthCheckPatternClient}</Select.Option>
-              <Select.Option value="none">{locale.healthCheckPatternNone}</Select.Option>
-            </Select>
-          </Form.Item> */}
+          <Form.Item {...formItemLayout} label={`${locale.groupName}:`}>
+            <Input
+              defaultValue={groupName}
+              placeholder="DEFAULT_GROUP"
+              readOnly={!isCreate}
+              onChange={groupName => this.onChangeCluster({ groupName })}
+            />
+          </Form.Item>
           <Form.Item label={`${locale.metadata}:`} {...formItemLayout}>
             <MonacoEditor
               language={'properties'}

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js

@@ -14,7 +14,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { request } from '@/globalLib';
-import { Input, Button, Card, ConfigProvider, Form, Loading } from '@alifd/next';
+import { Input, Button, Card, ConfigProvider, Form, Loading, Message } from '@alifd/next';
 import EditServiceDialog from './EditServiceDialog';
 import EditClusterDialog from './EditClusterDialog';
 import InstanceTable from './InstanceTable';
@@ -69,6 +69,7 @@ class ServiceDetail extends React.Component {
       url: `v1/ns/catalog/service?serviceName=${serviceName}`,
       beforeSend: () => this.openLoading(),
       success: ({ clusters = [], service = {} }) => this.setState({ service, clusters }),
+      error: e => Message.error(e.responseText || 'error'),
       complete: () => this.closeLoading(),
     });
   }
@@ -93,11 +94,6 @@ class ServiceDetail extends React.Component {
     const { locale = {} } = this.props;
     const { serviceName, loading, service = {}, clusters } = this.state;
     const { metadata = {}, selector = {} } = service;
-    const healthCheckMap = {
-      server: locale.healthCheckPatternService,
-      client: locale.healthCheckPatternClient,
-      none: locale.healthCheckPatternNone,
-    };
     const metadataText = processMetaData(METADATA_ENTER)(metadata);
     return (
       <div className="main-container service-detail">
@@ -135,12 +131,12 @@ class ServiceDetail extends React.Component {
             <FormItem label={`${locale.serviceName}:`}>
               <Input value={service.name} readOnly />
             </FormItem>
+            <FormItem label={`${locale.groupName}:`}>
+              <Input value={service.groupName} readOnly />
+            </FormItem>
             <FormItem label={`${locale.protectThreshold}:`}>
               <Input value={service.protectThreshold} readOnly />
             </FormItem>
-            {/* <FormItem label={`${locale.healthCheckPattern}:`}>
-              <Input value={healthCheckMap[service.healthCheckMode]} readOnly />
-            </FormItem> */}
             <FormItem label={`${locale.metadata}:`}>
               <MonacoEditor
                 language={'properties'}

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceList/ServiceList.js

@@ -186,6 +186,9 @@ class ServiceList extends React.Component {
                     style={{ width: 200 }}
                     value={keyword}
                     onChange={keyword => this.setState({ keyword })}
+                    onPressEnter={() =>
+                      this.setState({ currentPage: 1 }, () => this.queryServiceList())
+                    }
                   />
                 </FormItem>
                 <FormItem label="">
@@ -213,6 +216,7 @@ class ServiceList extends React.Component {
                 getRowProps={row => this.rowColor(row)}
               >
                 <Column title={locale.columnServiceName} dataIndex="name" />
+                <Column title={locale.groupName} dataIndex="groupName" />
                 <Column title={locale.columnClusterCount} dataIndex="clusterCount" />
                 <Column title={locale.columnIpCount} dataIndex="ipCount" />
                 <Column