Merge pull request #901 from loadchange/fe/v1.0

[ISSUE #269] console add groupName
This commit is contained in:
Fury Zhu 2019-03-14 16:16:24 +08:00 committed by GitHub
commit bd1fd2bcd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 42 additions and 63 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long