|
@@ -19,6 +19,8 @@ import clsx from 'clsx';
|
|
import Topology from './Topology';
|
|
import Topology from './Topology';
|
|
import * as d3 from 'd3';
|
|
import * as d3 from 'd3';
|
|
import { reconNodeTree } from './dataHandler';
|
|
import { reconNodeTree } from './dataHandler';
|
|
|
|
+import HealthyIndexOverview from './HealthyIndexOverview';
|
|
|
|
+import HealthyIndexDetailView from './HealthyIndexDetailView';
|
|
// import data from "./data.json";
|
|
// import data from "./data.json";
|
|
|
|
|
|
const getStyles = makeStyles((theme: Theme) => ({
|
|
const getStyles = makeStyles((theme: Theme) => ({
|
|
@@ -58,8 +60,6 @@ const getStyles = makeStyles((theme: Theme) => ({
|
|
},
|
|
},
|
|
}));
|
|
}));
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
const SystemHealthyView = () => {
|
|
const SystemHealthyView = () => {
|
|
useNavigationHook(ALL_ROUTER_TYPES.SYSTEM);
|
|
useNavigationHook(ALL_ROUTER_TYPES.SYSTEM);
|
|
|
|
|
|
@@ -88,7 +88,7 @@ const SystemHealthyView = () => {
|
|
);
|
|
);
|
|
const [nodes, setNodes] = useState<INodeTreeStructure[]>([]);
|
|
const [nodes, setNodes] = useState<INodeTreeStructure[]>([]);
|
|
const [lineChartsData, setLineChartsData] = useState<ILineChartData[]>([]);
|
|
const [lineChartsData, setLineChartsData] = useState<ILineChartData[]>([]);
|
|
- const [selectedNode, setSelectedNode] = useState<string>('');
|
|
|
|
|
|
+ const [selectedNode, setSelectedNode] = useState<INodeTreeStructure>();
|
|
const defaultThreshold = {
|
|
const defaultThreshold = {
|
|
cpu: 1,
|
|
cpu: 1,
|
|
memory: 8 * 1024 * 1024 * 1024,
|
|
memory: 8 * 1024 * 1024 * 1024,
|
|
@@ -97,23 +97,27 @@ const SystemHealthyView = () => {
|
|
|
|
|
|
const updateData = async () => {
|
|
const updateData = async () => {
|
|
const curT = new Date().getTime();
|
|
const curT = new Date().getTime();
|
|
- const result = await PrometheusHttp.getHealthyData({
|
|
|
|
|
|
+ const result = (await PrometheusHttp.getHealthyData({
|
|
start: curT - timeRange.value,
|
|
start: curT - timeRange.value,
|
|
end: curT,
|
|
end: curT,
|
|
step: timeRange.step,
|
|
step: timeRange.step,
|
|
- }) as IPrometheusAllData;
|
|
|
|
- console.log(result);
|
|
|
|
|
|
+ })) as IPrometheusAllData;
|
|
|
|
+ console.log('prometheus data', result);
|
|
setNodes(reconNodeTree(result, threshold));
|
|
setNodes(reconNodeTree(result, threshold));
|
|
- setLineChartsData([{
|
|
|
|
- label: 'TotalCount',
|
|
|
|
- data: result.totalVectorsCount
|
|
|
|
- },{
|
|
|
|
- label: 'SearchCount',
|
|
|
|
- data: result.searchVectorsCount
|
|
|
|
- },{
|
|
|
|
- label: 'SearchLatency',
|
|
|
|
- data: result.sqLatency
|
|
|
|
- },])
|
|
|
|
|
|
+ setLineChartsData([
|
|
|
|
+ {
|
|
|
|
+ label: 'TotalCount',
|
|
|
|
+ data: result.totalVectorsCount,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: 'SearchCount',
|
|
|
|
+ data: result.searchVectorsCount,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: 'SearchLatency',
|
|
|
|
+ data: result.sqLatency,
|
|
|
|
+ },
|
|
|
|
+ ]);
|
|
};
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
@@ -125,24 +129,33 @@ const SystemHealthyView = () => {
|
|
updateData();
|
|
updateData();
|
|
}, INTERVAL);
|
|
}, INTERVAL);
|
|
|
|
|
|
- console.log('nodes', nodes, lineChartsData);
|
|
|
|
|
|
+ const topoNodes = !!selectedNode ? selectedNode.children : nodes;
|
|
|
|
|
|
return (
|
|
return (
|
|
<div className={classes.root}>
|
|
<div className={classes.root}>
|
|
<div className={classes.mainView}>
|
|
<div className={classes.mainView}>
|
|
- {/* <Topology
|
|
|
|
- tree={tree}
|
|
|
|
- selectedNode={selectedNode}
|
|
|
|
|
|
+ <Topology
|
|
|
|
+ nodes={nodes}
|
|
|
|
+ selectedNode={selectedNode as INodeTreeStructure}
|
|
setSelectedNode={setSelectedNode}
|
|
setSelectedNode={setSelectedNode}
|
|
- ></Topology> */}
|
|
|
|
- <div style={{ height: '200px', width: '300px' }}></div>
|
|
|
|
|
|
+ />
|
|
|
|
+ <HealthyIndexOverview nodes={nodes} />
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
className={clsx(
|
|
className={clsx(
|
|
classes.detailView,
|
|
classes.detailView,
|
|
selectedNode ? classes.showDetailView : classes.hideDetailView
|
|
selectedNode ? classes.showDetailView : classes.hideDetailView
|
|
)}
|
|
)}
|
|
- ></div>
|
|
|
|
|
|
+ >
|
|
|
|
+ {selectedNode && (
|
|
|
|
+ <Topology
|
|
|
|
+ nodes={selectedNode.children}
|
|
|
|
+ selectedNode={selectedNode}
|
|
|
|
+ setSelectedNode={setSelectedNode}
|
|
|
|
+ />
|
|
|
|
+ )}
|
|
|
|
+ <HealthyIndexDetailView />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
};
|
|
};
|