public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logs Panel: fix conditionally called React hooks (#110113)

Browse Source 
* Logs Panel: fix conditionally called React hooks

* Update betterer
This commit is contained in:
Matias Chomicki
2025-08-25 17:50:49 +02:00
committed by GitHub
parent 4f0cb47d3c
commit 4eeb6c3ed8
3 changed files with 11 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.betterer.results
-13
View File
@@ -2562,19 +2562,6 @@ exports[`better eslint`] = {
"public/app/features/live/centrifuge/channel.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/features/logs/components/panel/LogLineDetailsFields.tsx:5381": [
[0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "0"],
[0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "1"],
[0, 0, 0, "React Hook \\"useMemo\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "2"],
[0, 0, 0, "React Hook \\"useMemo\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "3"],
[0, 0, 0, "React Hook \\"useStyles2\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "4"],
[0, 0, 0, "React Hook \\"useStyles2\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "5"]
],
"public/app/features/logs/components/panel/LogList.tsx:5381": [
[0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?", "0"],
[0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?", "1"],
[0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?", "2"]
],
"public/app/features/logs/logsFrame.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
public/app/features/logs/components/panel/LogLineDetailsFields.tsx
+6 -8
View File
@@ -25,14 +25,13 @@ interface LogLineDetailsFieldsProps {
}
export const LogLineDetailsFields = memo(({ disableActions, fields, log, logs, search }: LogLineDetailsFieldsProps) => {
if (!fields.length) {
return null;
}
const styles = useStyles2(getFieldsStyles);
const getLogs = useCallback(() => logs, [logs]);
const filteredFields = useMemo(() => (search ? filterFields(fields, search) : fields), [fields, search]);
if (filteredFields.length === 0) {
if (!fields.length) {
return null;
} else if (filteredFields.length === 0) {
return t('logs.log-line-details.search.no-results', 'No results to display.');
}
@@ -73,14 +72,13 @@ interface LogLineDetailsLabelFieldsProps {
}
export const LogLineDetailsLabelFields = ({ fields, log, logs, search }: LogLineDetailsLabelFieldsProps) => {
if (!fields.length) {
return null;
}
const styles = useStyles2(getFieldsStyles);
const getLogs = useCallback(() => logs, [logs]);
const filteredFields = useMemo(() => (search ? filterLabels(fields, search) : fields), [fields, search]);
if (filteredFields.length === 0) {
if (!fields.length) {
return null;
} else if (filteredFields.length === 0) {
return t('logs.log-line-details.search.no-results', 'No results to display.');
}
public/app/features/logs/components/panel/LogList.tsx
+5 -5
View File
@@ -373,11 +373,6 @@ const LogListComponent = ({
[initialScrollPosition, permalinkedLogId, processedLogs]
);
if (!containerElement || listHeight == null) {
// Wait for container to be rendered
return null;
}
const handleLogLineClick = useCallback(
(e: MouseEvent<HTMLElement>, log: LogListModel) => {
if (handleTextSelection(e, log)) {
@@ -403,6 +398,11 @@ const LogListComponent = ({
[debouncedScrollToItem, filteredLogs]
);
if (!containerElement || listHeight == null) {
// Wait for container to be rendered
return null;
}
return (
<div className={styles.logListContainer}>
{showControls && <LogListControls eventBus={eventBus} />}