Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: optimize metrics fetching in overview #24

Merged
merged 1 commit into from
Dec 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 34 additions & 4 deletions web/src/components/Overview/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { HealthStatusCircle } from "@/components/infini/health_status_circle";
import request from "@/utils/request";
import { AutoComplete, Input, Select, Button, Radio, Icon } from "antd";
import { Fragment, useState } from "react";
import { Fragment, useEffect, useMemo, useRef, useState } from "react";
import Filters from "./Filters";
import styles from "./index.scss";
import CardViewSvg from "@/components/Icons/CardView";
Expand Down Expand Up @@ -53,8 +53,10 @@ export default (props: IProps) => {
showStatus = false,
showTags = false,
getOptionMeta,
getSearch
},
getExtra,
defaultSearchValue,
} = props;

const [searchValue, setSearchValue] = useState("");
Expand All @@ -63,10 +65,18 @@ export default (props: IProps) => {

const [searchOpen, setSearchOpen] = useState(false);

const firstInitRef = useRef(true)

useEffect(() => {
if (defaultSearchValue) {
setSearchValue(defaultSearchValue)
}
}, [defaultSearchValue])

function renderOption(item) {
const { title, desc, right, tags, status } = getOptionMeta(item);
const { title, desc, right, tags, status, text } = getOptionMeta(item);
return (
<Select.Option key={item._id} text={item._source?.name}>
<Select.Option key={item._id} text={text} item={item}>
<div className="suggest-item">
<div className="suggest-line">
<div>
Expand Down Expand Up @@ -132,6 +142,14 @@ export default (props: IProps) => {

const activeColor = "#1890ff";

const autoCompleteProps = useMemo(() => {
if (defaultSearchValue && firstInitRef.current) {
firstInitRef.current = false
return { value: defaultSearchValue }
}
return {}
}, [defaultSearchValue, searchValue])

return (
<>
<div className={styles.searchLine}>
Expand Down Expand Up @@ -180,12 +198,24 @@ export default (props: IProps) => {
<AutoComplete
style={{ width: `calc(100% - ${filterWidth}px)` }}
dataSource={dataSource.map(renderOption)}
onSelect={(value, option) => onSearchChange(option.props.text)}
onSelect={(value, option) => {
if (getSearch) {
const search = getSearch(option.props.item)
if (search) {
setSearchValue(search.keyword)
onSearchChange(search.keyword)
if (search.filter) {
onFacetChange(search.filter)
}
}
}
}}
onSearch={handleSearch}
optionLabelProp="text"
getPopupContainer={(trigger) => trigger.parentElement}
open={searchOpen}
onDropdownVisibleChange={setSearchOpen}
{...autoCompleteProps}
>
<Input.Search
placeholder="Type keyword to search"
Expand Down
20 changes: 15 additions & 5 deletions web/src/components/Overview/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,11 @@ export default forwardRef((props: IProps, ref: any) => {
throw new Error();
}
}
const [queryParams, dispatch] = useReducer(reducer, initialQueryParams);
const [queryParams, dispatch] = useReducer(reducer, {
from: param?.from || initialQueryParams.from,
size: param?.size || initialQueryParams.size ,
keyword: param?.keyword || initialQueryParams.keyword
});

const { run, loading, value } = useFetch(
searchAction,
Expand All @@ -166,10 +170,10 @@ export default forwardRef((props: IProps, ref: any) => {
},
filter: param?.filters || {},
sort: param?.sort || [],
search_field: searchField,
search_field: searchField || searchAutoCompleteConfig?.defaultSearchField,
},
},
[queryParams, param?.filters, param?.sort]
[queryParams, param?.filters, param?.sort, aggsParams, searchHighlightFields, searchField, searchAutoCompleteConfig?.defaultSearchField]
);

const result = (value as any)?.hits || {};
Expand Down Expand Up @@ -220,7 +224,7 @@ export default forwardRef((props: IProps, ref: any) => {
return;
}

fetchListInfo();
// fetchListInfo();
}, [value]);

useEffect(() => {
Expand Down Expand Up @@ -248,7 +252,10 @@ export default forwardRef((props: IProps, ref: any) => {
setSearchField(value);
setParam({ ...param, search_field: value });
}}
onSearchChange={(value) => dispatch({ type: "search", value })}
defaultSearchValue={queryParams?.keyword}
onSearchChange={(value) => {
dispatch({ type: "search", value })
}}
onFacetChange={onFacetChange}
dispalyType={dispalyTypeObj[currentTab]}
onDisplayTypeChange={onDisplayTypeChange}
Expand Down Expand Up @@ -278,6 +285,7 @@ export default forwardRef((props: IProps, ref: any) => {
return (
<listItemConfig.component
data={item}
id={infoField}
info={
infoField && infos[infoField] ? infos[infoField] : {}
}
Expand All @@ -287,6 +295,8 @@ export default forwardRef((props: IProps, ref: any) => {
drawRef.current?.open();
}}
onChangeFacet={onFacetChange}
infoAction={infoAction}
parentLoading={loading}
/>
);
}}
Expand Down
38 changes: 34 additions & 4 deletions web/src/pages/Platform/Overview/Cluster/Card/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { Icon, Tooltip } from "antd";
import { Icon, Spin, Tooltip } from "antd";
import TinyArea from "@/components/infini/TinyArea";
import { Pie } from "@/components/Charts";
import { formatter } from "@/utils/format";
Expand All @@ -10,12 +10,39 @@ import "./index.scss";
import { Providers, ProviderIcon } from "@/lib/providers";
import { formatMessage } from "umi/locale";
import { SearchEngineIcon } from "@/lib/search_engines";
import request from "@/utils/request";

export default (props) => {
const { infoAction, id, parentLoading } = props;
const clusterID = props.data?._id;
const metadata = props.data._source || {};
const summary = props.info.summary || {};
const metrics = props.info.metrics || {};

const [info, setInfo] = useState({});
const [loading, setLoading] = useState(false)

const fetchListInfo = async (id) => {
if (!id) return
setLoading(true)
const res = await request(infoAction, {
method: "POST",
body: [id],
ignoreTimeout: true
}, false, false);
if (res) {
setInfo(res[id] || {});
}
setLoading(false)
};

useEffect(() => {
if (!parentLoading) {
fetchListInfo(id)
}
}, [id, parentLoading])

const summary = info?.summary || {};
const metrics = info?.metrics || {};

const fs_total_in_bytes = summary?.fs?.total_in_bytes || 0;
const fs_available_in_bytes = summary?.fs?.available_in_bytes || 0;
const fs_used_in_bytes = fs_total_in_bytes - fs_available_in_bytes;
Expand Down Expand Up @@ -84,7 +111,9 @@ export default (props) => {
const healthStatus = metadata.labels?.health_status;

return (
<div className="card-wrap">
<Spin spinning={!parentLoading && loading}>

<div className="card-wrap">
<div
className={`card-item ${props.isActive ? "active" : ""}`}
onClick={() => props.onSelect()}
Expand Down Expand Up @@ -243,5 +272,6 @@ export default (props) => {
</div>
</div>
</div>
</Spin>
);
};
7 changes: 6 additions & 1 deletion web/src/pages/Platform/Overview/Cluster/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,20 @@ export default () => {
searchAutoCompleteConfig={{
showStatus: true,
showTags: true,
defaultSearchField: 'name',
getSearch: (item) => ({
keyword: item?._source?.name,
}),
getOptionMeta: (item) => ({
title: item.highlight?.name || item._source?.name,
desc: item.highlight?.version || item._source?.version,
right: item.highlight?.host || item._source?.host,
tags: item._source?.tags,
status: item._source.labels?.health_status,
text: item?._source?.name
}),
}}
infoAction={`${ESPrefix}/cluster/info`}
infoAction={`${ESPrefix}/cluster/info?timeout=120s`}
facetLabels={facetLabels}
aggsParams={aggsParams}
sideSorterOptions={sideSorterOptions}
Expand Down
34 changes: 31 additions & 3 deletions web/src/pages/Platform/Overview/Indices/Card/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { Icon, Tooltip } from "antd";
import { Icon, Spin, Tooltip } from "antd";
import TinyArea from "@/components/infini/TinyArea";
import { Pie } from "@/components/Charts";
import { formatter } from "@/utils/format";
Expand All @@ -9,11 +9,11 @@ import moment from "moment";
import { formatUtcTimeToLocal } from "@/utils/utils";
import { FieldFilterFacet } from "@/components/Overview/List/FieldFilterFacet";
import "./index.scss";
import request from "@/utils/request";

export default (props) => {
const { infoAction, id, parentLoading } = props;
const metadata = props.data._source?.metadata || {};
const summary = props.info?.summary || {};
const metrics = props.info?.metrics || {};
const timestamp = props.data._source?.timestamp
? formatUtcTimeToLocal(props.data._source?.timestamp)
: "N/A";
Expand All @@ -27,6 +27,32 @@ export default (props) => {
return items;
};

const [info, setInfo] = useState({});
const [loading, setLoading] = useState(false)

const fetchListInfo = async (id) => {
if (!id) return
setLoading(true)
const res = await request(infoAction, {
method: "POST",
body: [id],
ignoreTimeout: true
}, false, false);
if (res) {
setInfo(res[id] || {});
}
setLoading(false)
};

useEffect(() => {
if (!parentLoading) {
fetchListInfo(id)
}
}, [id, parentLoading])

const summary = info?.summary || {};
const metrics = info?.metrics || {};

let metricsSearch = metrics?.search || {};
let metricsSearchData = metricsSearch?.data || defaultEmptyMetricsData();
let searchLineMaxValue = metricsSearchData?.[0]?.[1] || 0;
Expand Down Expand Up @@ -81,6 +107,7 @@ export default (props) => {
const unassignedShards = (numReplicas+1)*numShards-summary?.shards - summary?.replicas || 0

return (
<Spin spinning={!parentLoading && loading}>
<div className="card-wrap card-index">
<div
className={`card-item ${props.isActive ? "active" : ""}`}
Expand Down Expand Up @@ -201,5 +228,6 @@ export default (props) => {
</div>
</div>
</div>
</Spin>
);
};
12 changes: 9 additions & 3 deletions web/src/pages/Platform/Overview/Indices/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import Table from "./Table";
import Overview from "@/components/Overview";

const facetLabels = {
"metadata.index_name": "index",
"metadata.cluster_name": "cluster",
"metadata.labels.health_status": "health",
"metadata.labels.state": "state",
};

const aggsParams = [
{ field: "metadata.index_name", params: { size: 500 } },
{ field: "metadata.cluster_name", params: { size: 150 } },
{ field: "metadata.labels.state", params: { size: 100 } },
{ field: "metadata.labels.health_status", params: { size: 150 } },
];
Expand All @@ -39,16 +39,22 @@ export default () => {
]}
searchAutoCompleteConfig={{
showStatus: true,
defaultSearchField: 'metadata.index_name',
getSearch: (item) => ({
keyword: item?._source?.metadata?.index_name,
filter: { value: [item?._source?.metadata?.cluster_name], field: 'metadata.cluster_name' }
}),
getOptionMeta: (item) => ({
title:
item?.highlight?.index_name || item?._source?.metadata?.index_name,
desc:
item?.highlight?.cluster_name ||
item?._source?.metadata?.cluster_name,
status: item?._source?.metadata?.labels?.health_status,
text: item?._source?.metadata?.index_name
}),
}}
infoAction={`${ESPrefix}/index/info`}
infoAction={`${ESPrefix}/index/info?timeout=120s`}
facetLabels={facetLabels}
aggsParams={aggsParams}
sideSorterOptions={sideSorterOptions}
Expand Down
Loading
Loading