fix: overview service (#179)

* fix: overview service * fix: sum_over_time * fix: remove log
vesoft-inc · Dec 28, 2022 · 68b4f1f · 68b4f1f
1 parent 68ee0f2
commit 68b4f1f
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 200 deletions.
diff --git 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}
       >
-        <Form.Item label={intl.get('service.period')} name="period">
-          <DashboardSelect>
-            {TIME_INTERVAL_OPTIONS.map(value => (
-              <Option key={value} value={value}>
-                {value}
-              </Option>
-            ))}
-          </DashboardSelect>
-        </Form.Item>
         <MetricPopover list={curServiceMetricItems} />
         <Form.Item label={intl.get('service.metric')} name="metric">
           <DashboardSelect onChange={handleUpdateMetricType}>
@@ -108,34 +99,7 @@ function ServiceCardEdit(props: IProps) {
               </Form.Item>
             ) : null;
           }}
-        </Form.Item>
-        <Form.Item
-          noStyle={true}
-          shouldUpdate={(prevValues, currentValues) =>
-            prevValues.metric !== currentValues.metric
-          }
-        >
-          {({ getFieldValue }) => {
-            const metric = getFieldValue('metric');
-            const typeList = curServiceMetricItems.find(
-              item => item.metric === metric,
-            )?.aggregations;
-            return getFieldValue('metric') ? (
-              <Form.Item
-                label={intl.get('service.metricParams')}
-                name="aggregation"
-              >
-                <DashboardSelect>
-                  {typeList?.map((params, index) => (
-                    <Option key={index} value={params}>
-                      {params}
-                    </Option>
-                  ))}
-                </DashboardSelect>
-              </Form.Item>
-            ) : null;
-          }}
-        </Form.Item>
+        </Form.Item> 
         <Form.Item label={intl.get('common.baseLine')} name="baseLine">
           <InputNumber />
         </Form.Item>

diff --git a/src/components/ServiceMetricsFilterPanel/index.tsx b/src/components/ServiceMetricsFilterPanel/index.tsx
@@ -108,33 +108,7 @@ function ServiceMetricsFilterPanel(props: IProps) {
               </DashboardSelect>
             </Form.Item>
           )
-        }
-        <Form.Item
-          className="metric-period"
-          label={intl.get('service.period')}
-          name="period"
-        >
-          <DashboardSelect onChange={handlePeriodChange}>
-            {TIME_INTERVAL_OPTIONS.map(value => (
-              <Option key={value} value={value}>
-                {value}
-              </Option>
-            ))}
-          </DashboardSelect>
-        </Form.Item>
-        <Form.Item
-          className="metric-type"
-          label={intl.get('service.metricParams')}
-          name="metricType"
-        >
-          <DashboardSelect onChange={handleMetricTypeChange}>
-            {AGGREGATION_OPTIONS.map(type => (
-              <Option key={type} value={type}>
-                {type}
-              </Option>
-            ))}
-          </DashboardSelect>
-        </Form.Item>
+        } 
       </MetricsFilterPanel>
     </div>
   )

diff --git 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"
+}
diff --git 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": "操作成功，请稍后刷新页面查看"
+}
diff --git 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
@@ -93,19 +93,7 @@ function CustomServiceQueryPanel(props: IProps) {
         >
           {config.metric}
         </Popover>
-        <div>
-          {
-            !isHidePeriod && (
-              <>
-                <span>
-                  {intl.get('service.period')}: <span>{config.period}</span>
-                </span>
-                <span>
-                  {intl.get('service.metricParams')}: <span>{config.metricType}</span>
-                </span>
-              </>
-            )
-          }
+        <div> 
           <div
             className={classnames('blue btn-icon-with-desc', {
               'hide-period': isHidePeriod,

diff --git a/src/pages/ServiceManage/LeaderDistribution/index.less b/src/pages/ServiceManage/LeaderDistribution/index.less
@@ -3,14 +3,21 @@
 
 	.leader-content {
 		padding: 50px 90px;
+    .nebula-chart{
+      display: flex;
+      align-items: center;
+    }
 		.leader-table {
 			margin-top: 55px;
 			width: 100%;
 			.distribution-table{
 				max-height: 300px;
-				display: block;
-    			word-break: break-word;
+				display: flex;
+        flex-wrap: wrap;
 				overflow: auto;
+        >pre{
+          margin:0 5px;
+        }
 			}
 		}
 

diff --git a/src/pages/ServiceManage/LeaderDistribution/index.tsx b/src/pages/ServiceManage/LeaderDistribution/index.tsx
@@ -63,10 +63,10 @@ const LeaderDistribution: React.FC<IProps> = (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<IProps> = (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<IProps> = (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<IProps> = (props: IProps) => {
       title: intl.get('service.leaderDistribute'),
       dataIndex: 'distribution',
       render: distribution => (
-        <div className="distribution-table">{distribution}</div>
+        <div className="distribution-table">
+          {distribution.split(',').map(each => <pre>{each.trim(' ')}</pre>)}
+        </div>
       ),
     },
   ];