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>
2025-02-20 16:03:30 +08:00 · 2025-02-20 16:03:30 +08:00 · 1ecdbb3e59
parent 78cdd44e9c
commit 1ecdbb3e59
8 changed files with 92 additions and 64 deletions
--- a/web/src/components/Overview/Monitor/index.jsx
+++ b/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>
--- a/web/src/components/vendor/discover/public/application/components/histogram/histogram.jsx
+++ b/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}
--- a/web/src/locales/en-US/cluster.js
+++ b/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",
--- a/web/src/locales/zh-CN/cluster.js
+++ b/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": "高级",
--- a/web/src/models/global.js
+++ b/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;
--- a/web/src/pages/DataManagement/Discover.jsx
+++ b/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"
--- a/web/src/pages/DataManagement/Insight/Histogram/index.jsx
+++ b/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()
+        }}/>
    )
 }
--- a/web/src/pages/Platform/Overview/components/Logs/index.jsx
+++ b/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>