feat: support viewing logs for cluster, node health change events (#150)

* feat: support viewing logs for cluster, node, and index health change events

* chore: update release notes

docs/content.en/docs/release-notes/_index.md

@@ -21,6 +21,7 @@ Information about release notes of INFINI Console is provided here.
 
 ### Improvements
 - Update agent config with cluster name (#148)
+- Support viewing logs for cluster, node, index health change events (#150)
 
 ## 1.28.2 (2025-02-15)
 

docs/content.zh/docs/release-notes/_index.md

@@ -21,6 +21,8 @@ title: "版本历史"
 
 ### Improvements
 - 优化下发给 Agent 的配置，增加集群名称 (#148)
+- 集群，节点，索引健康状态变更支持查看日志 (#150)
+
 
 ## 1.28.2 (2025-02-15)
 

web/src/locales/en-US.js

@@ -121,6 +121,7 @@ export default {
   "form.button.restart": "Restart",
   "form.button.verify": "Verify",
   "form.button.clean": "Clean",
+  "form.button.view_logs": "View Logs",
   "form.button.clean.confim.desc": "Are you sure to clean data that is {status}?",
   "form.button.clean.unavailable.nodes": "Clean unavailable nodes",
   "form.button.clean.unavailable.nodes.desc": "Are you sure to clean nodes that are unavailable within seven days?",

web/src/locales/zh-CN.js

@@ -126,6 +126,7 @@ export default {
   "form.button.restart": "重启",
   "form.button.verify": "校验",
   "form.button.clean": "清除",
+  "form.button.view_logs": "View Logs",
   "form.button.clean.confim.desc": "确定删除状态为 {status} 的数据吗？",
   "form.button.clean.unavailable.nodes": "清除不可用节点",
   "form.button.clean.unavailable.nodes.desc": "确定清除7天内不可用的节点吗？",

web/src/pages/Overview/components/Activities/GenerateDesc.jsx

@@ -24,6 +24,10 @@ export default (props) => {
   if (indexName && indexName.includes("%")) {
     indexNameEncode = encodeURIComponent(indexName);
   }
+  const logStartTime = moment(timestamp).add(-3, "m");
+  const logEndTime = moment(timestamp).add(3, "m");
+  const logTimeRangeStr = encodeURIComponent(JSON.stringify({min:logStartTime.toISOString(),max:logEndTime.toISOString()}))
+
 
   switch (name) {
     case "index_state_change":
@@ -90,10 +94,20 @@ export default (props) => {
           </Link>{" "}
           <b>{opers[type]}</b> from <b>{hit._source.metadata.labels.from}</b> to{" "}
           <b>{hit._source.metadata.labels.to}</b>
+          <a
+          size="small"
+          style={{ marginLeft: 12, cursor: 'pointer' }} 
+          >
+            <Icon type="file-text" style={{marginRight:2}}/> 
+            <Link
+            to={`/cluster/monitor/elasticsearch/${hit._source.metadata.labels.cluster_id}?_g={"tab":"logs","timeRange":${logTimeRangeStr}}`}
+            >{formatMessage({ id: "form.button.view_logs" })}
+            </Link>
+        </a>
         </>
       );
     case "cluster_health_change":
-      return <ClusterHealthChange hit={hit} type={opers[type]} timeRangeStr={timeRangeStr}/>
+      return <ClusterHealthChange hit={hit} type={opers[type]} timeRangeStr={timeRangeStr} logTimeRangeStr={logTimeRangeStr}/>
     case "node_health_change":
       return (
         <>
@@ -110,6 +124,15 @@ export default (props) => {
             {hit._source.metadata.labels.cluster_name}
           </Link>{" "}
           <b>{opers[type]}</b> to <b>{hit._source.metadata.labels.to}</b>
+          <a
+            size="small"
+            style={{ marginLeft: 12, cursor: 'pointer' }} 
+          >
+            <Icon type="file-text" style={{marginRight:2}}/> 
+            <Link
+          to={`/cluster/monitor/${hit._source.metadata.labels.cluster_id}/nodes/${hit._source.metadata.labels.node_id}?_g={"tab":"logs","timeRange":${logTimeRangeStr}}`}
+        >{formatMessage({ id: "form.button.view_logs" })}</Link>
+        </a>
         </>
       );
     case "node_state_change":
@@ -216,12 +239,11 @@ export default (props) => {
 };
 
 const ClusterHealthChange = (props) => {
-  const { hit, type, timeRangeStr } = props;
+  const { hit, type, timeRangeStr, logTimeRangeStr } = props;
   const status = hit._source.metadata.labels.to
   const hasAllocationExplain = status === 'red'
 
   const [active, setActive] = useState(false)
-
   const content = (
     <span 
       style={{ cursor: hasAllocationExplain ? 'pointer' : 'default'}} 
@@ -251,6 +273,15 @@ const ClusterHealthChange = (props) => {
           <Icon type={active ? "up-square" : "down-square"}/> {formatMessage({ id: "form.button.detail" })} 
         </a>
       ) : null}
+      <a
+          size="small"
+          style={{ marginLeft: 12, cursor: 'pointer' }} 
+        >
+          <Icon type="file-text" style={{marginRight:2}}/> 
+          <Link
+        to={`/cluster/monitor/elasticsearch/${hit._source.metadata.labels.cluster_id}?_g={"tab":"logs","timeRange":${logTimeRangeStr}}`}
+      >{formatMessage({ id: "form.button.view_logs" })}</Link>
+        </a>
     </span>
   )