fix: issues

src/components/MetricPopover/index.module.less

@@ -1,5 +1,7 @@
 .popover-metric {
 	width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
 	.metric-content {
 		width: 100%;
 		display: flex;

src/components/MetricPopover/index.tsx

@@ -18,6 +18,7 @@ export const MetricPopover = (props: { list }) => {
     <Popover
       className={styles.dashboardPopover}
       // trigger="click"
+      placement="topLeft"
       content={
         <div className={styles.popoverMetric}>
           <div className={styles.metricContent}>

src/config/locale/en-US/common.json

@@ -48,5 +48,6 @@
     "port": "Port"
   },
   "addhostSuccess": "{host} add host success",
-  "successDelay": "Success, Please refresh the page later to view"
+  "successDelay": "Success, Please refresh the page later to view",
+  "running": "Running"
 }

src/config/locale/zh-CN/common.json

@@ -48,5 +48,6 @@
     "port": "端口号"
   },
   "addhostSuccess": "{host} add host 成功",
-  "successDelay": "操作成功，请稍后刷新页面查看"
+  "successDelay": "操作成功，请稍后刷新页面查看",
+  "running": "运行中"
 }

src/pages/MetricDetail/index.tsx

@@ -185,7 +185,6 @@ function MetricDetail(props: Props) {
   }, [curMetricsFilterValues.instanceList, dataSource])
 
   const updateChart = () => {
-    const [startTimestamps, endTimestamps] = calcTimeRange(curMetricsFilterValues.timeRange);
     const metricScene = getMetricSecene(metricType);
     const data = metricType === MetricTypeName.Disk ?
       getDiskData({

src/pages/ServiceDashboard/Detail/index.tsx

@@ -14,6 +14,7 @@ import {
   getMachineRouterPath,
   AggregationType,
   getMinNum,
+  getTickIntervalByGap,
 } from '@/utils/dashboard';
 import { IDispatch, IRootState } from '@/store';
 // import { VALUE_TYPE } from '@/utils/promQL';
@@ -204,18 +205,19 @@ function ServiceDetail(props: IProps) {
   const updateChart = () => {
     const { aliasConfig } = props;
     const { instanceList } = metricsFilterValues;
-    const [startTimestamps, endTimestamps] = calcTimeRange(metricsFilterValues.timeRange);
     metricCharts.forEach((chart, i) => {
       const data = getDataByType({
         data: dataSources[i] || [],
         type: instanceList,
         nameObj: getMetricsUniqName(MetricScene.SERVICE),
         aliasConfig,
       });
+      const realRange = data.length>0?(data[data.length-1].time - data[0].time):0;
+      const tickInterval = getTickIntervalByGap(Math.floor(realRange / 10)); // 10 ticks max
       chart.chartRef.updateDetailChart({
         type: serviceType,
         valueType: chart.metric.valueType,
-        tickInterval: getProperTickInterval(endTimestamps - startTimestamps),
+        tickInterval,
         maxNum: getMaxNum(data),
         minNum: getMinNum(data),
       }).changeData(data);

src/pages/ServiceManage/Overview/index.tsx

@@ -23,6 +23,7 @@ const mapDispatch: any = (dispatch: IDispatch) => ({
   asyncGetHostsInfo: dispatch.nebula.asyncGetHostsInfo,
   asyncGetServices: dispatch.nebula.asyncGetServices,
   asyncExecNGQL: dispatch.nebula.asyncExecNGQL,
+  getJobs: dispatch.nebula.getJobs,
   clear: dispatch.nebula.clear,
 });
 
@@ -57,10 +58,9 @@ const OverviewCardHeader = (props: IHaderProps) => {
 const Overview: React.FC<IProps> = (props: IProps) => {
 
   const { cluster, currentSpace, spaces, baseRouter = '/management', nebulaConnect } = props;
-
+  const [balancing, setBalancing] = useState(false);
   const modalHandler = useRef<any>();
   const [hosts, setHosts] = useState([]);
-
   useEffect(() => {
     props.clear();
   },[cluster])
@@ -93,6 +93,7 @@ const Overview: React.FC<IProps> = (props: IProps) => {
     if (code === 0) {
       message.success(intl.get('common.successDelay'));
       props.asyncGetServices();
+      getBalanceStatus();
     }
   };
 
@@ -117,13 +118,31 @@ const Overview: React.FC<IProps> = (props: IProps) => {
         if (code === 0) {
           message.success(intl.get('common.successDelay'));
           props.asyncGetServices();
+          getBalanceStatus();
         }
         handleModalClose();
       }
     });
 
   };
 
+  const getBalanceStatus = async () => {
+    const { code,data } = await props.getJobs();
+    if (code === 0) {
+      const hasRunningBalance = data.tables.find(item => item.Command.indexOf("BALANCE") && item.status === 'RUNNING');
+      setBalancing(hasRunningBalance);
+    }
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+        getBalanceStatus();
+    }, 2000);
+    return ()=>{
+      clearInterval(interval);
+    }
+  },[])
+
   const handleModalShow = async () => {
     if (modalHandler && modalHandler.current) {
       modalHandler.current.show();
@@ -183,17 +202,19 @@ const Overview: React.FC<IProps> = (props: IProps) => {
                 <Button
                   type="primary"
                   onClick={handleBalance}
+                  loading={balancing}
                   disabled={!versionFeature?.dataBalance || !currentSpace}
                 >
-                  Balance Data
+                  Balance Data { balancing? intl.get("common.running") : ''}
                 </Button>
                 <Button
                   type="primary"
                   onClick={handleModalShow}
+                  loading={balancing}
                   ghost
                   disabled={!versionFeature?.dataBalance || !currentSpace}
                 >
-                  Balance Data Remove
+                  Balance Data Remove { balancing? intl.get("common.running") : ''}
                 </Button>
               </>
             )

src/pages/ServiceManage/PartitionInfo/index.less

@@ -14,5 +14,6 @@
 
 	.common-header .service-screen .ant-input-group-wrapper {
 		width: 250px;
+    text-align: left;
 	}
 }

src/store/models/nebula.ts

@@ -35,6 +35,12 @@ export function NebulaModelWrapper(serviceApi, state, _effects) {
       }),
     },
     effects: (dispatch: any) => ({
+      async getJobs() {
+          const { code, data } = (await serviceApi.execNGQL({
+          gql: 'show jobs',
+        })) as any; 
+        return { code,data };
+      },
       async asyncGetServiceConfigs(module) {
         const data = module === 'graph' ? await serviceApi.getGraphConfig() : await serviceApi.getStorageConfig() as any;