feat: add allocation to activities if is `cluster health change` and changed to `red` (#48)

Co-authored-by: yaojiping <yaojiping@infini.ltd>
This commit is contained in:
yaojp123 2024-12-19 21:01:39 +08:00 committed by GitHub
parent 1475ded1ec
commit d8d26fbb90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 60 additions and 12 deletions

View File

@ -1,5 +1,7 @@
import moment from "moment";
import { Link } from "umi";
import { Icon } from "antd";
import { useMemo, useState } from "react";
export default (props) => {
const { hit, opers } = props;
@ -90,18 +92,7 @@ export default (props) => {
</>
);
case "cluster_health_change":
return (
<>
health status of cluster{" "}
<Link
to={`/cluster/monitor/elasticsearch/${hit._source.metadata.labels.cluster_id}?_g={"timeRange":${timeRangeStr}}`}
>
{hit._source.metadata.labels.cluster_name}
</Link>{" "}
<b>{opers[type]}</b> from <b>{hit._source.metadata.labels.from}</b> to{" "}
<b>{hit._source.metadata.labels.to}</b>
</>
);
return <ClusterHealthChange hit={hit} type={opers[type]} timeRangeStr={timeRangeStr}/>
case "node_health_change":
return (
<>
@ -222,3 +213,60 @@ export default (props) => {
}
return <></>;
};
const ClusterHealthChange = (props) => {
const { hit, type, timeRangeStr } = 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'}}
onClick={() => {
if (hasAllocationExplain) {
setActive(!active)
}
}}
>
health status of cluster{" "}
<Link
to={`/cluster/monitor/elasticsearch/${hit._source.metadata.labels.cluster_id}?_g={"timeRange":${timeRangeStr}}`}
>
{hit._source.metadata.labels.cluster_name}
</Link>{" "}
<b>{type}</b> from <b>{hit._source.metadata.labels.from}</b> to{" "}
<b>{status}</b>{hasAllocationExplain ? (
<Icon
style={{ marginLeft: 6, fontSize: 12 }}
type={active ? "up" : "down"}
onClick={() => {
if (hasAllocationExplain) {
setActive(!active)
}
}}
/>
) : null}
</span>
)
const allocationExplain = useMemo(() => {
if (!hit._source.payload?.cluster_health?.allocation_explain) return {}
try {
const object = JSON.parse(hit._source.payload?.cluster_health?.allocation_explain)
return object
} catch (error) {
return {}
}
}, [hit._source.payload?.cluster_health?.allocation_explain])
return active ? (
<div>
<div>{content}</div>
<pre style={{ margin: 0 }}>
{JSON.stringify(allocationExplain, null, 4)}
</pre>
</div>
) : content
}