chore: adjust the description when no data in monitor logs (#153)

* chore: adjust the description when no data in monitor logs

* chore: adjust discover's histogram

---------

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

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

@@ -158,7 +158,7 @@ const Monitor = (props) => {
       return monitor_configs?.node_stats?.enabled === false && monitor_configs?.index_stats?.enabled === false
     }
     return metric_collection_mode === 'agent'
-  }, [JSON.stringify(selectedCluster?.monitor_configs)])
+  }, [JSON.stringify(selectedCluster)])
 
   return (
     <div>
@@ -170,6 +170,7 @@ const Monitor = (props) => {
             <>
               <div style={{ marginBottom: 5 }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div style={{ maxWidth: 600 }}>
                     <DatePicker
                       locale={getLocale()}
                       start={state.timeRange.min}
@@ -210,6 +211,7 @@ const Monitor = (props) => {
                       }}
                       recentlyUsedRangesKey={'monitor'}
                     />
+                  </div>
                   <CollectStatus fetchUrl={`${ESPrefix}/${selectedCluster?.id}/_collection_stats`}/>
                 </div>
               </div>

web/src/components/vendor/discover/public/application/components/histogram/histogram.jsx

@@ -88,7 +88,7 @@ export class DiscoverHistogram extends Component {
 
   render() {
     const timeZone = getTimezone();
-    const { chartData } = this.props;
+    const { chartData, height = 100 } = this.props;
     
     const { chartsTheme, chartsBaseTheme } = this.state;
 
@@ -149,7 +149,7 @@ export class DiscoverHistogram extends Component {
     //console.log(data)
 
     return (
-      <Chart size={{ height: 40 }}>
+      <Chart size={{ height }}>
         <Settings
           xDomain={xDomain}
           onBrushEnd={this.onBrushEnd}

web/src/locales/en-US/cluster.js

@@ -130,6 +130,8 @@ export default {
   "cluster.monitor.logs.node": "Node",
   "cluster.monitor.logs.message": "Message",
   "cluster.monitor.logs.search.placeholder": "Search message",
+  "cluster.monitor.logs.empty.agent": "No data, please change the time range or check if the Agent is working properly.",
+  "cluster.monitor.logs.empty.agentless": "No data, please install the Agent and change the cluster collection mode to Agent.",
 
   "cluster.monitor.tabs.overview": "Overview",
   "cluster.monitor.tabs.advanced": "Advanced",

web/src/locales/zh-CN/cluster.js

@@ -121,6 +121,8 @@ export default {
   "cluster.monitor.logs.node": "节点",
   "cluster.monitor.logs.message": "日志",
   "cluster.monitor.logs.search.placeholder": "搜索日志",
+  "cluster.monitor.logs.empty.agent": "没有数据，请更改时间范围或检查 Agent 是否正常工作。",
+  "cluster.monitor.logs.empty.agentless": "没有数据，请安装 Agent 并更改集群采集模式为 Agent 。",
 
   "cluster.monitor.tabs.overview": "概览",
   "cluster.monitor.tabs.advanced": "高级",

web/src/models/global.js

@@ -355,7 +355,10 @@ export default {
       let idx = state.clusterList.findIndex((item) => item.id === payload.id);
       idx > -1 && (state.clusterList[idx].name = payload.name);
       if (state.selectedCluster?.id === payload.id) {
-        state.selectedCluster.monitor_configs = payload.monitor_configs
+        state.selectedCluster = {
+          ...(state.selectedCluster || {}),
+          ...(payload || {})
+        }
       }
       state.clusterStatus[payload.id].config.monitored = payload.monitored;
       return state;

web/src/pages/DataManagement/Discover.jsx

@@ -178,6 +178,9 @@ const Discover = (props) => {
     field: "",
     enabled: false,
   };
+
+  const [histogramVisible, setHistogramVisible] = useState(false)
+
   const [distinctParams, setDistinctParams] = React.useState(
     distinctParamsDefault
   );
@@ -1162,7 +1165,9 @@ const Discover = (props) => {
             showLayoutListIcon={false}
             histogramProps={{
               histogramData,
-              timefilterUpdateHandler
+              onHistogramToggle: () => {
+                setHistogramVisible(!histogramVisible)
+              },
             }}
             // viewLayout={viewLayout}
             // onViewLayoutChange={(layout) => {
@@ -1310,6 +1315,31 @@ const Discover = (props) => {
                             responsive={false}
                             style={{ position: "relative" }}
                           >
+                            {histogramVisible && opts.timefield && (
+                              <EuiFlexItem>
+                                <section
+                                  aria-label={"Histogram of found documents"}
+                                  className="dscTimechart"
+                                >
+                                  {opts.chartAggConfigs &&
+                                    histogramData &&
+                                    records.length !== 0 && (
+                                      <div
+                                        className="dscHistogramGrid"
+                                        data-test-subj="discoverChart"
+                                      >
+                                        <DiscoverHistogram
+                                          chartData={histogramData}
+                                          timefilterUpdateHandler={
+                                            timefilterUpdateHandler
+                                          }
+                                        />
+                                      </div>
+                                    )}
+                                </section>
+                                <EuiSpacer size="s" />
+                              </EuiFlexItem>
+                            )}
                             <EuiFlexItem className="eui-yScroll">
                               <section
                                 className="dscTable eui-yScroll"

web/src/pages/DataManagement/Insight/Histogram/index.jsx

@@ -5,25 +5,11 @@ import styles from "./index.less";
 
 export default (props) => {
 
-    const { histogramData, timefilterUpdateHandler } = props
+    const { onHistogramToggle } = props
-
-    const [visible, setVisible] = useState(false)
 
     return (
-        <Popover 
+        <Icon type="bar-chart" title="show histogram" style={{color: '#006BB4', cursor: 'pointer'}} onClick={() => {
-            visible={visible} 
+            onHistogramToggle()
-            placement="left" 
-            title={null} 
-            overlayClassName={styles.histogram}
-            content={(
-                <DiscoverHistogram
-                    chartData={histogramData}
-                    timefilterUpdateHandler={timefilterUpdateHandler}
-                />
-        )}>
-            <Icon type="bar-chart" style={{color: '#006BB4', cursor: 'pointer'}} onClick={() => {
-                setVisible(!visible)
         }}/>
-        </Popover>
     )
 }

web/src/pages/Platform/Overview/components/Logs/index.jsx

@@ -314,7 +314,10 @@ export default (props) => {
                             </div>
                         </>
                     ) : (
-                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+                        <Empty 
+                            image={Empty.PRESENTED_IMAGE_SIMPLE}
+                            description={formatMessage({ id: `cluster.monitor.logs.empty.${isAgent ? 'agent' : 'agentless'}` })}
+                        />
                     )
                 }
             </div>