fix: optimize host's monitor (#13)

Co-authored-by: yaojiping <yaojiping@infini.ltd>

web/src/components/Overview/Monitor/index.jsx

@@ -113,12 +113,6 @@ const Monitor = (props) => {
     return monitor_configs?.node_stats?.enabled === false && monitor_configs?.index_stats?.enabled === false
   }, [JSON.stringify(selectedCluster?.monitor_configs)])
 
-  console.log("spinning")
-  console.log(spinning)
-  console.log("state.refresh")
-  console.log(state.refresh)
-
-
   return (
     <div>
       <BreadcrumbList data={breadcrumbList} />

web/src/components/vendor/console/modules/autocomplete/autocomplete.ts

@@ -356,7 +356,6 @@ export function getCurrentMethodAndTokenPaths(
     // mark the url as completed.
     ret.urlTokenPath.push(URL_PATH_END_MARKER);
   }
-  debugger
 
   if (t && t.type === "method") {
     ret.method = t.value;
@@ -593,7 +592,6 @@ export default function({ coreEditor: editor }: { coreEditor: CoreEditor }) {
           switch ((t || ({} as Token)).type) {
             case "method":
               // we moved one back
-              debugger
               return "path";
             default:
               if (isUrlPathToken(t)) {
@@ -1110,7 +1108,6 @@ export default function({ coreEditor: editor }: { coreEditor: CoreEditor }) {
     } else {
       components = getUnmatchedEndpointComponents();
     }
-    debugger
     populateContext(ret.bodyTokenPath, context, editor, true, components);
 
     return context;

web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx

@@ -8,6 +8,24 @@ import QueueMetric from "../../components/queue_metric";
 import { ESPrefix } from "@/services/common";
 import { SearchEngines } from "@/lib/search_engines";
 
+export const shouldHaveModelInferenceBreaker = (cluster) => {
+  if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(cluster?.distribution)) return false;
+  const versions = cluster?.version?.split('.') || []
+  if (parseInt(versions[0]) > 8 || (parseInt(versions[0]) === 8 && parseInt(versions[1]) >= 6 )) {
+    return true
+  }
+  return false
+}
+
+export const isVersionGTE6 = (cluster) => {
+  if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(cluster?.distribution)) return true;
+  const main = cluster?.version?.split('.')[0]
+  if (main && parseInt(main) >= 6) {
+    return true
+  }
+  return false
+}
+
 export default ({
   selectedCluster,
   clusterID,
@@ -29,14 +47,13 @@ export default ({
     refresh
   }
 
-  const isVersionGTE6 = useMemo(() => {
+  const isVersionGTE8_6 = useMemo(() => {
-    if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
+    return shouldHaveModelInferenceBreaker(selectedCluster)
-    const main = selectedCluster?.version?.split('.')[0]
+  }, [selectedCluster])
-    if (main && parseInt(main) >= 6) {
+
-      return true
+  const versionGTE6 = useMemo(() => {
-    }
+    return isVersionGTE6(selectedCluster)
-    return false
+  }, [selectedCluster]) 
-  }, [selectedCluster?.version]) 
 
   const [param, setParam] = useState({
     tab: "cluster",
@@ -141,8 +158,8 @@ export default ({
                       "fielddata_breaker",
                       "request_breaker",
                       "in_flight_requests_breaker",
-                      "model_inference_breaker"
+                      isVersionGTE8_6 ? "model_inference_breaker" : undefined
-                  ]
+                  ].filter((item) => !!item)
               ],
               [
                   "io",
@@ -314,7 +331,7 @@ export default ({
           param={param}
           setParam={setParam}
           metrics={[
-            isVersionGTE6 ? [
+            versionGTE6 ? [
                 "thread_pool_write",
                 [
                     "write_active",
@@ -340,7 +357,7 @@ export default ({
                     "search_threads"
                 ]
             ],
-            !isVersionGTE6 ? [
+            !versionGTE6 ? [
                 "thread_pool_bulk",
                 [
                   "bulk_active",

web/src/pages/Platform/Overview/Host/Detail/Metrics.js

@@ -16,14 +16,22 @@ export default (props) => {
     return null;
   }
 
-  const hasAgent = !!props.data?._source?.agent_id;
+  const isAgent = !!props.data?._source?.agent_id;
 
   return (
     <>
       <Metrics
         metricAction={`/host/${id}/metrics`}
+        metrics={[
+          'cpu_used_percent', 
+          'memory_used_percent', 
+          'disk_used_percent', 
+          isAgent ? 'network_summary' : undefined, 
+          isAgent ? 'disk_read_rate' : undefined, 
+          isAgent ? 'disk_write_rate' : undefined
+        ].filter((item) => !!item)}
         renderExtraMetric={() =>
-          !hasAgent && (
+          !isAgent && (
             <div
               style={{
                 height: 150,
@@ -56,7 +64,7 @@ export default (props) => {
           )
         }
         extra={
-          hasAgent && (
+          isAgent && (
             <>
               <Agent id={id} />
               <Process id={id} />

web/src/pages/Platform/Overview/Host/Monitor/advanced.jsx

@@ -3,24 +3,46 @@ import { Button } from 'antd';
 import InstallAgent from '@/components/Overview/Monitor/InstallAgent';
 import { formatMessage } from "umi/locale";
 
-const timezone = "local";
-
 export default ({
   hostID,
   timeRange,
   handleTimeChange,
-  info
+  info,
+  bucketSize,
+  timezone,
+  timeout,
+  refresh,
 }) => {
+
+  const isAgent = info?.agent_id
+
   return (
     <ClusterMetric
       timezone={timezone}
       timeRange={timeRange}
+      timeout={timeout}
+      bucketSize={bucketSize}
+      refresh={refresh}
       handleTimeChange={handleTimeChange}
       fetchUrl={`/host/${hostID}/metrics`}
       renderExtra={() => {
-        if (info?.agent_id) return;
+        if (isAgent) return;
         return <InstallAgent height={226} desc={formatMessage({ id: "cluster.metrics.host.uninstall_agent" })}/>
       }}
+      metrics={[
+        'cpu_used_percent', 
+        'memory_used_percent', 
+        'disk_used_percent', 
+        isAgent ? 'network_summary' : undefined, 
+        isAgent ? 'disk_read_rate' : undefined, 
+        isAgent ? 'disk_write_rate' : undefined,
+        isAgent ? 'system_load' : undefined,
+        isAgent ? 'cpu_iowait' : undefined,
+        isAgent ? 'swap_memory_used_percent' : undefined,
+        isAgent ? 'network_packets_summary' : undefined,
+        isAgent ? 'disk_partition_usage' : undefined,
+        isAgent ? 'network_interface_output_rate' : undefined,
+      ].filter((item) => !!item)}
     />
   );
 }

web/src/pages/Platform/Overview/Host/Monitor/index.jsx

@@ -15,6 +15,7 @@ const panes = [
 export default (props) => {
   return (
     <Monitor
+      selectedCluster={{}}
       formatState={(state) => {
         return {
           ...state,

web/src/pages/Platform/Overview/Host/Monitor/overview.jsx

@@ -9,19 +9,36 @@ export default ({
   hostID,
   timeRange,
   handleTimeChange,
-  info
+  info,
+  bucketSize,
+  timezone,
+  timeout,
+  refresh,
 }) => {
+  const isAgent = info?.agent_id
+
   return (
     <ClusterMetric
       timezone={timezone}
       timeRange={timeRange}
+      timeout={timeout}
+      bucketSize={bucketSize}
+      refresh={refresh}
       handleTimeChange={handleTimeChange}
       overview={1}
       fetchUrl={`/host/${hostID}/metrics`}
       renderExtra={() => {
-        if (info?.agent_id) return;
+        if (isAgent) return;
         return <InstallAgent height={226} desc={formatMessage({ id: "cluster.metrics.host.uninstall_agent" })}/>
       }}
+      metrics={[
+        'cpu_used_percent', 
+        'memory_used_percent', 
+        'disk_used_percent', 
+        isAgent ? 'network_summary' : undefined, 
+        isAgent ? 'disk_read_rate' : undefined, 
+        isAgent ? 'disk_write_rate' : undefined
+      ].filter((item) => !!item)}
     />
   );
 }

web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx

@@ -4,6 +4,7 @@ import NodeMetric from "../../components/node_metric";
 import QueueMetric from "../../components/queue_metric";
 import { formatMessage } from "umi/locale";
 import { SearchEngines } from "@/lib/search_engines";
+import { isVersionGTE6, shouldHaveModelInferenceBreaker } from "../../Cluster/Monitor/advanced";
 
 export default ({
   selectedCluster,
@@ -27,13 +28,12 @@ export default ({
     refresh
   }
 
-  const isVersionGTE6 = useMemo(() => {
+  const isVersionGTE8_6 = useMemo(() => {
-    if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
+    return shouldHaveModelInferenceBreaker(selectedCluster)
-    const main = selectedCluster?.version?.split('.')[0]
+  }, [selectedCluster])
-    if (main && parseInt(main) >= 6) {
+
-      return true
+  const versionGTE6 = useMemo(() => {
-    }
+    return isVersionGTE6(selectedCluster)
-    return false
   }, [selectedCluster])
 
   const [param, setParam] = useState({
@@ -120,8 +120,8 @@ export default ({
                     "fielddata_breaker",
                     "request_breaker",
                     "in_flight_requests_breaker",
-                    "model_inference_breaker"
+                    isVersionGTE8_6 ? "model_inference_breaker" : undefined
-                ]
+                ].filter((item) => !!item)
             ],
             [
                 "io",
@@ -215,7 +215,7 @@ export default ({
           param={param}
           setParam={setParam}
           metrics={[
-            isVersionGTE6 ? [
+            versionGTE6 ? [
                 "thread_pool_write",
                 [
                     "write_active",
@@ -241,7 +241,7 @@ export default ({
                     "search_threads"
                 ]
             ],
-            !isVersionGTE6 ? [
+            !versionGTE6 ? [
                 "thread_pool_bulk",
                 [
                   "bulk_active",
@@ -286,7 +286,7 @@ export default ({
                     "force_merge_threads"
                 ]
             ]
-        ].filter((item) => !!item)}
+        ]}
         />
       </Tabs.TabPane>
     </Tabs>