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 <[email protected]>

Author: yaojp123

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,46 +170,48 @@ const Monitor = (props) => {
             <>
               <div style={{ marginBottom: 5 }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <DatePicker
-                    locale={getLocale()}
-                    start={state.timeRange.min}
-                    end={state.timeRange.max}
-                    onRangeChange={({ start, end }) => {
-                      handleTimeChange({ start, end })
-                    }}
-                    {...refresh}
-                    onRefreshChange={(newRefresh) => {
-                      onTimeSettingsChange(newRefresh)
-                      setRefresh(newRefresh)
-                    }}
-                    onRefresh={(value) => handleTimeChange({ ...(value || {}), refresh: new Date().valueOf()})}
-                    showTimeSetting={true}
-                    showTimeInterval={true}
-                    timeInterval={state.timeInterval}
-                    timeIntervalDisabled={state.timeIntervalDisabled}
-                    showTimeout={true}
-                    timeout={state.timeout}
-                    onTimeSettingChange={(timeSetting) => {
-                      onTimeSettingsChange({
-                        timeInterval: timeSetting.timeInterval,
-                        timeout: timeSetting.timeout
-                      })
-                      setState({
-                        ...state,
-                        param,
-                        timeInterval: timeSetting.timeInterval,
-                        timeout: timeSetting.timeout
-                      });
-                    }}
-                    timeZone={timeZone}
-                    onTimeZoneChange={(timeZone) => {
-                      onTimeSettingsChange({
-                        timeZone,
-                      })
-                      setTimeZone(timeZone)
-                    }}
-                    recentlyUsedRangesKey={'monitor'}
-                  />
+                  <div style={{ maxWidth: 600 }}>
+                    <DatePicker
+                      locale={getLocale()}
+                      start={state.timeRange.min}
+                      end={state.timeRange.max}
+                      onRangeChange={({ start, end }) => {
+                        handleTimeChange({ start, end })
+                      }}
+                      {...refresh}
+                      onRefreshChange={(newRefresh) => {
+                        onTimeSettingsChange(newRefresh)
+                        setRefresh(newRefresh)
+                      }}
+                      onRefresh={(value) => handleTimeChange({ ...(value || {}), refresh: new Date().valueOf()})}
+                      showTimeSetting={true}
+                      showTimeInterval={true}
+                      timeInterval={state.timeInterval}
+                      timeIntervalDisabled={state.timeIntervalDisabled}
+                      showTimeout={true}
+                      timeout={state.timeout}
+                      onTimeSettingChange={(timeSetting) => {
+                        onTimeSettingsChange({
+                          timeInterval: timeSetting.timeInterval,
+                          timeout: timeSetting.timeout
+                        })
+                        setState({
+                          ...state,
+                          param,
+                          timeInterval: timeSetting.timeInterval,
+                          timeout: timeSetting.timeout
+                        });
+                      }}
+                      timeZone={timeZone}
+                      onTimeZoneChange={(timeZone) => {
+                        onTimeSettingsChange({
+                          timeZone,
+                        })
+                        setTimeZone(timeZone)
+                      }}
+                      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 [visible, setVisible] = useState(false)
+    const { onHistogramToggle } = props
 
     return (
-        <Popover 
-            visible={visible} 
-            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>
+        <Icon type="bar-chart" title="show histogram" style={{color: '#006BB4', cursor: 'pointer'}} onClick={() => {
+            onHistogramToggle()
+        }}/>
     )
 }

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>