GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 15:39:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(FE): onFocusSelected bug is resolved (#258)

Browse Source 
* fix: onFocusSelected bug is resolved

* dependecies array is updated

* updated the dependency array

* fix: TraceGantt chart is updated

Co-authored-by: Ankit Nayan <ankit@signoz.io>
This commit is contained in:
palash-signoz 2021-08-19 23:13:16 +05:30 committed by GitHub
parent 0055eaf656
commit 4817a17320
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx
View File

@ -20,7 +20,7 @@ interface TraceGanttChartProps {
treeData: pushDStree[];
clickedSpan: pushDStree;
selectedSpan: pushDStree;
resetZoom: () => {};
resetZoom: (value: boolean) => {};
setSpanTagsInfo: (p: { data: any }) => {};
}
@ -32,14 +32,16 @@ const TraceGanttChart = ({
setSpanTagsInfo,
}: TraceGanttChartProps) => {
let checkStrictly = true;
const [selectedRows, setSelectedRows] = useState([]);
const [selectedRows, setSelectedRows] = useState<string[]>([]);
const [clickedSpanData, setClickedSpanData] = useState(clickedSpan);
const [defaultExpandedRows, setDefaultExpandedRows] = useState([]);
const [defaultExpandedRows, setDefaultExpandedRows] = useState<string[]>([]);
const [sortedTreeData, setSortedTreeData] = useState(treeData);
const [isReset, setIsReset] = useState(false);
const [tabsContainerWidth, setTabsContainerWidth] = useState(0);
const tableRef = useRef("");
let tabsContainer = document.querySelector("#collapsable .ant-tabs-nav-list");
let tabsContainer = document.querySelector<HTMLElement>(
"#collapsable .ant-tabs-nav-list",
);
let tabs = document.querySelectorAll("#collapsable .ant-tabs-tab");
@ -55,7 +57,9 @@ const TraceGanttChart = ({
if (clickedSpan) {
setClickedSpanData(clickedSpan);
}
setTabsContainerWidth(tabsContainer?.offsetWidth);
if (tabsContainer) {
setTabsContainerWidth(tabsContainer.offsetWidth);
}
}
handleScroll(selectedSpan?.id);
}, [sortedTreeData, treeData, clickedSpan]);
@ -69,12 +73,13 @@ const TraceGanttChart = ({
) {
setSelectedRows([clickedSpan.id]);
getParentKeys(clickedSpan);
handleFocusOnSelectedPath("", [clickedSpan.id], clickedSpan);
handleFocusOnSelectedPath("", [clickedSpan.id]);
}
}, [clickedSpan, selectedRows, isReset, clickedSpanData]);
let parentKeys = [];
let childrenKeys = [];
let parentKeys: string[] = [];
let childrenKeys: string[] = [];
const getParentKeys = (obj) => {
if (has(obj, "parent")) {
parentKeys.push(obj.parent.id);
@ -82,7 +87,7 @@ const TraceGanttChart = ({
}
};
const getChildrenKeys = (obj) => {
const getChildrenKeys = (obj: pushDStree) => {
if (has(obj, "children")) {
childrenKeys.push(obj.id);
if (!isEmpty(obj.children)) {
@ -105,7 +110,7 @@ const TraceGanttChart = ({
setDefaultExpandedRows([treeData?.[0]?.id]);
// /.setSpanTagsInfo({data: treeData?.[0]})
}
}, [selectedSpan, treeData]);
}, [selectedSpan, treeData, clickedSpan]);
const getMaxEndTime = (treeData) => {
if (treeData.length > 0) {
@ -169,7 +174,7 @@ const TraceGanttChart = ({
}
let paddingLeft = 0;
let startTime = parseFloat(record.startTime);
let startTime = parseFloat(record.startTime.toString());
let duration = parseFloat((record.time / 1000000).toFixed(2));
paddingLeft = parseInt(
getPaddingLeft(
@ -200,7 +205,17 @@ const TraceGanttChart = ({
const handleFocusOnSelectedPath = (event, selectedRowsList = selectedRows) => {
if (!isEmpty(selectedRowsList)) {
let node = {};
// initializing the node
let node: pushDStree = {
children: [],
id: "",
name: "",
startTime: 0,
tags: [],
time: 0,
value: 0,
};
traverseTreeData(treeData, (item: pushDStree) => {
if (item.id === selectedRowsList[0]) {
node = item;
@ -214,13 +229,20 @@ const TraceGanttChart = ({
console.error("Node not found in Tree Data.");
}
// get the parent of the node
getParentKeys(node);
// get the children of the node
getChildrenKeys(node);
let rows = document.querySelectorAll("#collapsable table tbody tr");
Array.from(rows).map((row) => {
let attribKey = row.getAttribute("data-row-key");
if (!selectedRowsList.includes(attribKey)) {
rows.forEach((row) => {
let attribKey = row.getAttribute("data-row-key") || "";
if (
!isEmpty(attribKey) &&
!selectedRowsList.includes(attribKey) &&
!childrenKeys.includes(attribKey)
) {
row.classList.add("hide");
}
});
@ -230,7 +252,7 @@ const TraceGanttChart = ({
const handleResetFocus = () => {
const rows = document.querySelectorAll("#collapsable table tbody tr");
Array.from(rows).map((row) => {
rows.forEach((row) => {
row.classList.remove("hide");
});
@ -256,13 +278,13 @@ const TraceGanttChart = ({
setIsReset(false);
}
},
onSelect: (record) => {
onSelect: (record: pushDStree) => {
handleRowOnClick(record);
},
selectedRowKeys: selectedRows,
};
const handleRowOnClick = (record) => {
const handleRowOnClick = (record: pushDStree) => {
let node = {};
traverseTreeData(treeData, (item: pushDStree) => {
if (item.id === record.id) {
@ -286,7 +308,7 @@ const TraceGanttChart = ({
setSelectedRows([record.id]);
};
const handleOnExpandedRowsChange = (item) => {
const handleOnExpandedRowsChange = (item: string[]) => {
setDefaultExpandedRows(item);
};
@ -303,8 +325,7 @@ const TraceGanttChart = ({
>
<Col>
<StyledButton onClick={handleFocusOnSelectedPath}>
{" "}
Focus on selected path{" "}
Focus on selected path
</StyledButton>
</Col>
<Col>
@ -320,14 +341,18 @@ const TraceGanttChart = ({
dataSource={sortedTreeData}
rowKey="id"
sticky={true}
onRow={(record, rowIndex) => {
onRow={(record) => {
return {
onClick: () => handleRowOnClick(record, rowIndex), // click row
onClick: () => handleRowOnClick(record), // click row
};
}}
expandedRowKeys={defaultExpandedRows}
onExpandedRowsChange={handleOnExpandedRowsChange}
onExpandedRowsChange={(keys) =>
handleOnExpandedRowsChange(keys.map((e) => e.toString()))
}
pagination={false}
expandable={{
expandedRowKeys: defaultExpandedRows,
}}
scroll={{ y: 540 }}
rowClassName="row-styles"
filterMultiple={false}