From 4178e771604f03f50243d6a8d8d06475efee4768 Mon Sep 17 00:00:00 2001
From: liugq <silenceqi@hotmail.com>
Date: Sun, 26 Sep 2021 14:21:59 +0800
Subject: [PATCH] console bug fixed and update cluster status

---
 web/src/components/GlobalHeader/DropdownItem.tsx          | 8 ++++----
 web/src/components/GlobalHeader/DropdownSelect.js         | 2 +-
 .../components/kibana/console/components/ConsoleInput.tsx | 8 ++++----
 .../console/hooks/use_send_current_request_to_es/index.ts | 1 +
 web/src/pages/Alerting/pages/Home/Home.js                 | 7 -------
 web/src/pages/Alerting/pages/Main/Main.js                 | 7 +++++++
 web/src/pages/Alerting/pages/Overview/Overview.js         | 4 ++--
 web/src/pages/System/Cluster/Index.js                     | 8 ++++----
 8 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/web/src/components/GlobalHeader/DropdownItem.tsx b/web/src/components/GlobalHeader/DropdownItem.tsx
index 77765975..49655cab 100644
--- a/web/src/components/GlobalHeader/DropdownItem.tsx
+++ b/web/src/components/GlobalHeader/DropdownItem.tsx
@@ -1,6 +1,6 @@
 import {Icon} from 'antd';
 import styles from './DropdownSelect.less';
-import {HealthStatusCircle, ClusterHealthStatus} from '@/components/infini/health_status_circle'
+import {HealthStatusCircle} from '@/components/infini/health_status_circle'
 
 export interface ClusterItem {
   id: string
@@ -10,8 +10,8 @@ export interface ClusterItem {
 }
 
 export interface ClusterStatus {
-  cluster_available: boolean
-  health_status: ClusterHealthStatus
+  available: boolean
+  health: any
   nodes_count: number
 }
 
@@ -30,7 +30,7 @@ export const DropdownItem = ({
 }:props)=>{
   return <div className={styles["dropdown-item"] +" " + (isSelected ? styles['selected']: '')} onClick={onClick}>
     <div className={styles["wrapper"]}>
-      {clusterStatus?.cluster_available ? <HealthStatusCircle status={clusterStatus?.health_status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
+      {clusterStatus?.available ? <HealthStatusCircle status={clusterStatus?.health?.status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
       <span className={styles["name"]} >{clusterItem?.name}</span>
       <div className={styles["version"]}>{clusterItem?.version}</div>
     </div>
diff --git a/web/src/components/GlobalHeader/DropdownSelect.js b/web/src/components/GlobalHeader/DropdownSelect.js
index 0649d0b5..7c98db2b 100644
--- a/web/src/components/GlobalHeader/DropdownSelect.js
+++ b/web/src/components/GlobalHeader/DropdownSelect.js
@@ -128,7 +128,7 @@ class DropdownSelect extends React.Component{
                                                                           type="caret-down"/></Button> */}
             <span style={{position:'relative'}}>
               <i style={{position: 'absolute', left:15,zIndex:10, top: -28}}>
-              {cstatus?.cluster_available ? <HealthStatusCircle status={cstatus?.health_status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
+              {cstatus?.available ? <HealthStatusCircle status={cstatus?.health?.status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
               </i> 
               <input className={styles['btn-ds']} style={{outline:'none', paddingLeft:22}} value={value[labelField]} readOnly={true} />
               <Icon style={{position:'absolute', top:-6, right:-4}} type="caret-down"/>
diff --git a/web/src/components/kibana/console/components/ConsoleInput.tsx b/web/src/components/kibana/console/components/ConsoleInput.tsx
index 3fa955ee..0eee7447 100644
--- a/web/src/components/kibana/console/components/ConsoleInput.tsx
+++ b/web/src/components/kibana/console/components/ConsoleInput.tsx
@@ -41,11 +41,10 @@ const SendRequestButton = (props: any) => {
   const sendCurrentRequestToES = useSendCurrentRequestToES();
   const saveCurrentTextObject = useSaveCurrentTextObject();
 
-  const {sendCurrentRequestToESRef, saveCurrentTextObjectRef} = props;
+  const {saveCurrentTextObjectRef} = props;
   useEffect(()=>{
-    sendCurrentRequestToESRef.current = sendCurrentRequestToES
     saveCurrentTextObjectRef.current = saveCurrentTextObject
-  }, [sendCurrentRequestToESRef, saveCurrentTextObjectRef])
+  }, [saveCurrentTextObjectRef])
   
 
   return (
@@ -87,6 +86,7 @@ const ConsoleInputUI = ({clusterID, initialText}:ConsoleInputProps) => {
 
   const sendCurrentRequestToESRef = useRef(()=>{});
   const saveCurrentTextObjectRef = useRef((content:string)=>{});
+  sendCurrentRequestToESRef.current = useSendCurrentRequestToES();
   
   const {services:{settings}} = useServicesContext();
 
@@ -168,7 +168,7 @@ const ConsoleInputUI = ({clusterID, initialText}:ConsoleInputProps) => {
               ref={editorActionsRef}
             >
               <EuiFlexItem>
-                <SendRequestButton sendCurrentRequestToESRef={sendCurrentRequestToESRef} saveCurrentTextObjectRef={saveCurrentTextObjectRef}/>
+                <SendRequestButton saveCurrentTextObjectRef={saveCurrentTextObjectRef}/>
               </EuiFlexItem>
               <EuiFlexItem>
                 <ConsoleMenu
diff --git a/web/src/components/kibana/console/hooks/use_send_current_request_to_es/index.ts b/web/src/components/kibana/console/hooks/use_send_current_request_to_es/index.ts
index 0f3b04de..d32a8e9c 100644
--- a/web/src/components/kibana/console/hooks/use_send_current_request_to_es/index.ts
+++ b/web/src/components/kibana/console/hooks/use_send_current_request_to_es/index.ts
@@ -50,6 +50,7 @@ export const useSendCurrentRequestToES = () => {
   const { services: { history }, clusterID } = useServicesContext();
 
   return useCallback(async () => {
+    console.log(clusterID)
     try {
       const editor = registry.getInputEditor();
       const requests = await editor.getRequestsInRange();
diff --git a/web/src/pages/Alerting/pages/Home/Home.js b/web/src/pages/Alerting/pages/Home/Home.js
index f4bac654..a8221edb 100644
--- a/web/src/pages/Alerting/pages/Home/Home.js
+++ b/web/src/pages/Alerting/pages/Home/Home.js
@@ -22,7 +22,6 @@ import Monitors from '../Monitors/containers/Monitors';
 import DestinationsList from '../Destinations/containers/DestinationsList';
 import { formatMessage } from 'umi/locale';
 import {AlertOverview} from '../Dashboard/containers/AlertOverview';
-import Overview from '../Overview/Overview';
 
 const getSelectedTabId = (pathname) => {
   if (pathname.includes('monitors')) return 'monitors';
@@ -123,12 +122,6 @@ export default class Home extends Component {
                   notifications={notifications}
                 />
               )}
-            />
-             <Route
-              path="/overview"
-              render={(props) => (
-                <Overview {...props} httpClient={httpClient} notifications={notifications} />
-              )}
             />
              <Route
                 exact
diff --git a/web/src/pages/Alerting/pages/Main/Main.js b/web/src/pages/Alerting/pages/Main/Main.js
index cc916959..579fa553 100644
--- a/web/src/pages/Alerting/pages/Main/Main.js
+++ b/web/src/pages/Alerting/pages/Main/Main.js
@@ -24,6 +24,7 @@ import MonitorDetails from '../MonitorDetails/containers/MonitorDetails';
 import CreateDestination from '../Destinations/containers/CreateDestination';
 import Flyout from '../../components/Flyout';
 import { APP_PATH } from '../../utils/constants';
+import Overview from '../Overview/Overview';
 
 class Main extends Component {
   state = { flyout: null };
@@ -55,6 +56,12 @@ class Main extends Component {
                 }}
               />
               <Switch>
+                <Route
+                  path="/overview"
+                  render={(props) => (
+                    <Overview {...props} httpClient={core.http} notifications={core.notifications} />
+                  )}
+                />
                 <Route
                   path={APP_PATH.CREATE_MONITOR}
                   render={(props) => (
diff --git a/web/src/pages/Alerting/pages/Overview/Overview.js b/web/src/pages/Alerting/pages/Overview/Overview.js
index d8fbbb33..6971c261 100644
--- a/web/src/pages/Alerting/pages/Overview/Overview.js
+++ b/web/src/pages/Alerting/pages/Overview/Overview.js
@@ -86,10 +86,10 @@ export default (props)=>{
     <div style={{height:'150px'}}>
        <Chart>
         <Settings theme={theme} />
-        <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={timeFormatter(niceTimeFormatByDay(2))} /> 
+        <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={timeFormatter(niceTimeFormatByDay(90))} /> 
         <Axis
           id="left"
-          title={'最近告警统计'}
+          title={'最近三个月告警统计'}
           position={Position.Left}
         />
         <LineSeries
diff --git a/web/src/pages/System/Cluster/Index.js b/web/src/pages/System/Cluster/Index.js
index 510eb7a8..8510d075 100644
--- a/web/src/pages/System/Cluster/Index.js
+++ b/web/src/pages/System/Cluster/Index.js
@@ -43,11 +43,11 @@ class Index extends  React.Component {
       if(!clusterStatus || !clusterStatus[val]){
         return
       }
-      const isAvailable = clusterStatus[val].cluster_available;
+      const isAvailable = clusterStatus[val].available;
       if(!isAvailable){
         return <Icon type="close-circle" style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}}/>
       }
-      const status = clusterStatus[val].health_status;
+      const status = clusterStatus[val].health?.status;
       return <HealthStatusCircle  status={status}/>
       
     }
@@ -83,13 +83,13 @@ class Index extends  React.Component {
   },{
     title: '节点数',
     dataIndex: 'id',
-    key: 'mode_count',
+    key: 'number_of_nodes',
     render: (val)=>{
       const {clusterStatus} = this.props;
       if(!clusterStatus || !clusterStatus[val]){
         return
       }
-      return clusterStatus[val].nodes_count;
+      return clusterStatus[val].health?.number_of_nodes;
     }
   },{
     title: '集群地址',