From 68b4f1fb4c144d54e9b9bd24765b3d088f9a173b Mon Sep 17 00:00:00 2001 From: Miao Zhuang <1060950782@163.com> Date: Wed, 28 Dec 2022 14:24:02 +0800 Subject: [PATCH] fix: overview service (#179) * fix: overview service * fix: sum_over_time * fix: remove log --- .../Service/ServiceCardEdit/index.tsx | 38 +------ .../ServiceMetricsFilterPanel/index.tsx | 28 +---- src/config/locale/en-US/common.json | 101 +++++++++--------- src/config/locale/zh-CN/common.json | 101 +++++++++--------- src/pages/ServiceDashboard/Detail/index.tsx | 1 + .../CustomServiceQueryPanel/index.tsx | 14 +-- .../LeaderDistribution/index.less | 11 +- .../LeaderDistribution/index.tsx | 12 ++- src/pages/ServiceManage/Overview/index.tsx | 26 +++-- .../PartitionDistribution/index.tsx | 2 +- src/store/models/service.ts | 19 +++- src/utils/service.ts | 2 +- 12 files changed, 155 insertions(+), 200 deletions(-) diff --git a/src/components/Service/ServiceCardEdit/index.tsx b/src/components/Service/ServiceCardEdit/index.tsx index c89c9ae9..b885eedd 100644 --- a/src/components/Service/ServiceCardEdit/index.tsx +++ b/src/components/Service/ServiceCardEdit/index.tsx @@ -63,15 +63,6 @@ function ServiceCardEdit(props: IProps) { initialValues={editItem} onFinish={handlePanelConfigUpdate} > - - - {TIME_INTERVAL_OPTIONS.map(value => ( - - ))} - - @@ -108,34 +99,7 @@ function ServiceCardEdit(props: IProps) { ) : null; }} - - - prevValues.metric !== currentValues.metric - } - > - {({ getFieldValue }) => { - const metric = getFieldValue('metric'); - const typeList = curServiceMetricItems.find( - item => item.metric === metric, - )?.aggregations; - return getFieldValue('metric') ? ( - - - {typeList?.map((params, index) => ( - - ))} - - - ) : null; - }} - + diff --git a/src/components/ServiceMetricsFilterPanel/index.tsx b/src/components/ServiceMetricsFilterPanel/index.tsx index 5f48f634..449adf95 100644 --- a/src/components/ServiceMetricsFilterPanel/index.tsx +++ b/src/components/ServiceMetricsFilterPanel/index.tsx @@ -108,33 +108,7 @@ function ServiceMetricsFilterPanel(props: IProps) { ) - } - - - {TIME_INTERVAL_OPTIONS.map(value => ( - - ))} - - - - - {AGGREGATION_OPTIONS.map(type => ( - - ))} - - + } ) diff --git a/src/config/locale/en-US/common.json b/src/config/locale/en-US/common.json index 087d2f5c..fc5706d0 100644 --- a/src/config/locale/en-US/common.json +++ b/src/config/locale/en-US/common.json @@ -1,51 +1,52 @@ { - "account": "Account Login", - "login": "Log In", - "logout": "Logout", - "username": "Please enter user name", - "password": "Please enter password", - "rememberPassword": "Remember password", - "version": "Version", - "dashboard": "Dashboard", - "machine": "Machine", - "service": "Service", - "serviceManagement": "Management", - "serviceInfo": "Service Info", - "partitionInfo": "Partition Info", - "config": "Config", - "longTermTask": "Long-term Task", - "metric": "Metric", - "lineChart": "Line Chart", - "barChart": "Bar Chart", - "view": "View", - "set": "Set up", - "cancel": "Cancel", - "confirm": "Confirm", - "overview": "Overview", - "baseLine": "Base Line", - "succeed": "Succeed", - "editBaseLine": "Edit Base Line", - "baseLineTip": "Please enter a number greater than 0", - "unit": "Unit", - "detail": "Detail", - "help": "Help", - "manual": "User Manual", - "forum": "Forum", - "forumLink": "https://discuss.nebula-graph.io/", - "configTip": "Please enter a configuration name", - "all": "All", - "metricLabel": "instance", - "updateFrequency": "refresh frequency", - "overviewInfo": "Info Overview", - "nebulaVersion": { - "enterprise": "Enterprise", - "community": "Community" - }, - "noData": "No Data", - "powerInfo": "Powered by NebulaGraph", - "configServer": { - "host": "Graphd IP address", - "port": "Port" - }, - "addhostSuccess": "{host} add host success" -} + "account": "Account Login", + "login": "Log In", + "logout": "Logout", + "username": "Please enter user name", + "password": "Please enter password", + "rememberPassword": "Remember password", + "version": "Version", + "dashboard": "Dashboard", + "machine": "Machine", + "service": "Service", + "serviceManagement": "Management", + "serviceInfo": "Service Info", + "partitionInfo": "Partition Info", + "config": "Config", + "longTermTask": "Long-term Task", + "metric": "Metric", + "lineChart": "Line Chart", + "barChart": "Bar Chart", + "view": "View", + "set": "Set up", + "cancel": "Cancel", + "confirm": "Confirm", + "overview": "Overview", + "baseLine": "Base Line", + "succeed": "Succeed", + "editBaseLine": "Edit Base Line", + "baseLineTip": "Please enter a number greater than 0", + "unit": "Unit", + "detail": "Detail", + "help": "Help", + "manual": "User Manual", + "forum": "Forum", + "forumLink": "https://discuss.nebula-graph.io/", + "configTip": "Please enter a configuration name", + "all": "All", + "metricLabel": "instance", + "updateFrequency": "refresh frequency", + "overviewInfo": "Info Overview", + "nebulaVersion": { + "enterprise": "Enterprise", + "community": "Community" + }, + "noData": "No Data", + "powerInfo": "Powered by NebulaGraph", + "configServer": { + "host": "Graphd IP address", + "port": "Port" + }, + "addhostSuccess": "{host} add host success", + "successDelay": "Success, Please refresh the page later to view" +} \ No newline at end of file diff --git a/src/config/locale/zh-CN/common.json b/src/config/locale/zh-CN/common.json index 99fa2161..e761f2cd 100644 --- a/src/config/locale/zh-CN/common.json +++ b/src/config/locale/zh-CN/common.json @@ -1,51 +1,52 @@ { - "account": "账户登录", - "login": "登录", - "logout": "登出", - "username": "请输入用户名", - "password": "请输入密码", - "rememberPassword": "记住密码", - "version": "版本", - "dashboard": "看板", - "machine": "机器", - "service": "服务", - "serviceManagement": "管理", - "serviceInfo": "服务信息", - "partitionInfo": "分片信息", - "config": "配置", - "longTermTask": "长时任务", - "metric": "指标", - "lineChart": "折线图", - "barChart": "柱状图", - "view": "查看", - "set": "设置", - "cancel": "取消", - "confirm": "确认", - "overview": "概览", - "baseLine": "基线", - "succeed": "成功", - "editBaseLine": "编辑基线", - "baseLineTip": "请输入大于0的值", - "unit": "单位", - "detail": "详情", - "help": "帮助", - "manual": "使用手册", - "forum": "求助论坛", - "forumLink": "https://discuss.nebula-graph.com.cn/", - "all": "全部", - "updateFrequency": "更新频率", - "configTip": "请输入配置名进行搜索", - "metricLabel": "实例", - "overviewInfo": "信息总览", - "nebulaVersion": { - "enterprise": "企业版", - "community": "社区版" - }, - "noData": "没有数据", - "powerInfo": "版权归 NebulaGraph 所有", - "configServer": { - "host": "Graphd IP 地址", - "port": "端口号" - }, - "addhostSuccess": "{host} add host 成功" -} + "account": "账户登录", + "login": "登录", + "logout": "登出", + "username": "请输入用户名", + "password": "请输入密码", + "rememberPassword": "记住密码", + "version": "版本", + "dashboard": "看板", + "machine": "机器", + "service": "服务", + "serviceManagement": "管理", + "serviceInfo": "服务信息", + "partitionInfo": "分片信息", + "config": "配置", + "longTermTask": "长时任务", + "metric": "指标", + "lineChart": "折线图", + "barChart": "柱状图", + "view": "查看", + "set": "设置", + "cancel": "取消", + "confirm": "确认", + "overview": "概览", + "baseLine": "基线", + "succeed": "成功", + "editBaseLine": "编辑基线", + "baseLineTip": "请输入大于0的值", + "unit": "单位", + "detail": "详情", + "help": "帮助", + "manual": "使用手册", + "forum": "求助论坛", + "forumLink": "https://discuss.nebula-graph.com.cn/", + "all": "全部", + "updateFrequency": "更新频率", + "configTip": "请输入配置名进行搜索", + "metricLabel": "实例", + "overviewInfo": "信息总览", + "nebulaVersion": { + "enterprise": "企业版", + "community": "社区版" + }, + "noData": "没有数据", + "powerInfo": "版权归 NebulaGraph 所有", + "configServer": { + "host": "Graphd IP 地址", + "port": "端口号" + }, + "addhostSuccess": "{host} add host 成功", + "successDelay": "操作成功，请稍后刷新页面查看" +} \ No newline at end of file diff --git a/src/pages/ServiceDashboard/Detail/index.tsx b/src/pages/ServiceDashboard/Detail/index.tsx index b2dbf83f..2f6eec2f 100644 --- a/src/pages/ServiceDashboard/Detail/index.tsx +++ b/src/pages/ServiceDashboard/Detail/index.tsx @@ -205,6 +205,7 @@ function ServiceDetail(props: IProps) { end: endTime, space: serviceType === ServiceName.GRAPHD ? space : undefined, clusterID: cluster?.id, + isRawMetric:item.isRawMetric }).then(res => { resolve(res); }).catch(e => { diff --git a/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx b/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx index 4c4f6da5..dcbf67f7 100644 --- a/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx +++ b/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx @@ -93,19 +93,7 @@ function CustomServiceQueryPanel(props: IProps) { > {config.metric} -
- { - !isHidePeriod && ( - <> - - {intl.get('service.period')}: {config.period} - - - {intl.get('service.metricParams')}: {config.metricType} - - - ) - } +
pre{ + margin:0 5px; + } } } diff --git a/src/pages/ServiceManage/LeaderDistribution/index.tsx b/src/pages/ServiceManage/LeaderDistribution/index.tsx index 94ec2bde..4d9a9d75 100644 --- a/src/pages/ServiceManage/LeaderDistribution/index.tsx +++ b/src/pages/ServiceManage/LeaderDistribution/index.tsx @@ -63,10 +63,10 @@ const LeaderDistribution: React.FC = (props: IProps) => { const getStorageInfo = async () => { const res = await props.asyncGetHostsInfo(); const data = res.map((item: any) => ({ - name: item.Host, + name: item.Host+':'+item.Port, count: item['Leader count'], distribution: item['Leader distribution'], - })); + })).sort((a, b) => a.name > b.name ? 1 : -1); setData(data); }; @@ -94,7 +94,7 @@ const LeaderDistribution: React.FC = (props: IProps) => { if (compare(formatVersion(cluster?.version || DEFAULT_VERSION), 'v3.0.0', '<')) { code = await props.asyncExecNGQL('BALANCE LEADER'); if (code === 0) { - message.success(intl.get('common.succeed')); + message.success(intl.get('common.successDelay')); getStorageInfo(); } } else { @@ -106,7 +106,7 @@ const LeaderDistribution: React.FC = (props: IProps) => { modalHandler.current?.hide(); const code = await props.asyncExecNGQL('SUBMIT JOB BALANCE LEADER'); if (code === 0) { - message.success(intl.get('common.succeed')); + message.success(intl.get('common.successDelay')); getStorageInfo(); } }; @@ -124,7 +124,9 @@ const LeaderDistribution: React.FC = (props: IProps) => { title: intl.get('service.leaderDistribute'), dataIndex: 'distribution', render: distribution => ( -
{distribution}
+
+ {distribution.split(',').map(each => 
{each.trim(' ')}
)} +
), }, ]; diff --git a/src/pages/ServiceManage/Overview/index.tsx b/src/pages/ServiceManage/Overview/index.tsx index a33c2a97..a64d75e2 100644 --- a/src/pages/ServiceManage/Overview/index.tsx +++ b/src/pages/ServiceManage/Overview/index.tsx @@ -87,7 +87,7 @@ const Overview: React.FC = (props: IProps) => { const balanceData = async () => { const code = await props.asyncExecNGQL('submit job balance data'); if (code === 0) { - message.success(intl.get('common.succeed')); + message.success(intl.get('common.successDelay')); props.asyncGetServices(); } }; @@ -102,14 +102,22 @@ const Overview: React.FC = (props: IProps) => { }; const handleHostChange = async host => { - const code = await props.asyncExecNGQL( - `submit job balance data remove ${host}`, - ); - if (code === 0) { - message.success(intl.get('common.succeed')); - props.asyncGetServices(); - } - handleModalClose(); + AntModal.confirm({ + content: intl.get('common.confirmAction'), + okText: intl.get('common.confirm'), + cancelText: intl.get('common.cancel'), + onOk: async () => { + const code = await props.asyncExecNGQL( + `submit job balance data remove ${host}`, + ); + if (code === 0) { + message.success(intl.get('common.successDelay')); + props.asyncGetServices(); + } + handleModalClose(); + } + }); + }; const handleModalShow = async () => { diff --git a/src/pages/ServiceManage/PartitionDistribution/index.tsx b/src/pages/ServiceManage/PartitionDistribution/index.tsx index c82e5b70..e94f8bc1 100644 --- a/src/pages/ServiceManage/PartitionDistribution/index.tsx +++ b/src/pages/ServiceManage/PartitionDistribution/index.tsx @@ -101,7 +101,7 @@ class PartitionDistribution extends React.Component { const data = Object.keys(groupRes).map(item => ({ name: item, count: groupRes[item], - })); + })).sort((a, b) => b.name < a.name ? 1 : -1); this.setState({ data }, this.updateChart); }; diff --git a/src/store/models/service.ts b/src/store/models/service.ts index 9f780937..7558cd29 100644 --- a/src/store/models/service.ts +++ b/src/store/models/service.ts @@ -54,8 +54,10 @@ export function SereviceModelWrapper(serviceApi) { }) { const { start, end, space, query: _query, clusterID } = payload; const step = getProperStep(start, end); - const _start = start / 1000; - const _end = end / 1000; + let _start = start / 1000; + let _end = end / 1000; + _start = _start - _start % step; + _end = _end + (step - _end % step); let query = `sum(${_query}{${getClusterPrefix()}="${clusterID}"})`; query = `${_query}{${getClusterPrefix()}="${clusterID}", space="${space || ''}"}`; const { code, data } = (await serviceApi.execPromQLByRange({ @@ -86,6 +88,7 @@ export function SereviceModelWrapper(serviceApi) { end: number; clusterID?: string; noSuffix?: boolean; + isRawMetric?: boolean; }) { const { start, @@ -96,12 +99,18 @@ export function SereviceModelWrapper(serviceApi) { noSuffix = false, } = payload; const step = getProperStep(start, end); - const _start = start / 1000; - const _end = end / 1000; + let _start = start / 1000; + let _end = end / 1000; + _start = _start - _start % step; + _end = _end + (step - _end % step); let query = _query; if (!noSuffix) { if (clusterID) { - query = `${_query}{${getClusterPrefix()}="${clusterID}", space="${space || ''}"}`; + if (!payload.isRawMetric) { + query = `sum_over_time(${_query}{${getClusterPrefix()}="${clusterID}", space="${space || ''}"}[${step}s])`; + } else { + query = `${_query}{${getClusterPrefix()}="${clusterID}", space="${space || ''}"}`; + } } else { query = `${_query}{space="${space || ''}"}`; } diff --git a/src/utils/service.ts b/src/utils/service.ts index 10a0c4e0..df7c0ecb 100644 --- a/src/utils/service.ts +++ b/src/utils/service.ts @@ -2,7 +2,7 @@ import { AggregationType } from './dashboard'; import { ServiceName } from './interface'; export const SERVICE_POLLING_INTERVAL = 10 * 1000; -export const SERVICE_QUERY_PERIOD = 10 * 60; +export const SERVICE_QUERY_PERIOD = 5; export const SERVICE_DEFAULT_RANGE = 6 * 60 * 60 * 1000; export enum INTERVAL_FREQUENCY_TYPE {