Chore: eslint plugin react hooks fix in jeager (#27580)

* Use eslintignore instead of gitignore

* Fix jaeger errors

.eslintignore

+node_modules
+compiled
+build
+vendor
+devenv
+data
+dist

.eslintrc

@@ -3,7 +3,7 @@
   "root": true,
   "root": true,
   "overrides": [
   "overrides": [
     {
     {
-      "files": ["packages/**/*.{ts,tsx}", "public/app/**/*.{ts,tsx}"],
+      "files": ["packages/grafana-ui/**/*.{ts,tsx}", "public/app/**/*.{ts,tsx}"],
       "rules": {
       "rules": {
         "react-hooks/rules-of-hooks": "off",
         "react-hooks/rules-of-hooks": "off",
         "react-hooks/exhaustive-deps": "off"
         "react-hooks/exhaustive-deps": "off"

package.json

@@ -13,7 +13,7 @@
     "e2e:debug": "./e2e/start-and-run-suite debug",
     "e2e:debug": "./e2e/start-and-run-suite debug",
     "e2e:dev": "./e2e/start-and-run-suite dev",
     "e2e:dev": "./e2e/start-and-run-suite dev",
     "jest": "jest --notify --watch",
     "jest": "jest --notify --watch",
-    "lint": "eslint . --ext .js,.tsx,.ts --cache --ignore-path .gitignore --ignore-pattern devenv",
+    "lint": "eslint . --ext .js,.tsx,.ts --cache",
     "jest-ci": "mkdir -p reports/junit && export JEST_JUNIT_OUTPUT_DIR=reports/junit && jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
     "jest-ci": "mkdir -p reports/junit && export JEST_JUNIT_OUTPUT_DIR=reports/junit && jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
     "lint:fix": "yarn lint --fix",
     "lint:fix": "yarn lint --fix",
     "packages:build": "lerna run clean && lerna run build --ignore @grafana-plugins/input-datasource",
     "packages:build": "lerna run clean && lerna run build --ignore @grafana-plugins/input-datasource",

packages/grafana-toolkit/.eslintrc

 {
 {
   "rules": {
   "rules": {
     "no-restricted-imports": ["error", { "patterns": ["@grafana/runtime"] }]
     "no-restricted-imports": ["error", { "patterns": ["@grafana/runtime"] }]
+  },
+  "overrides": [
+    {
+      "files": ["./**/*.{ts,tsx}"],
+      "rules": {
+        "react-hooks/rules-of-hooks": "off",
+        "react-hooks/exhaustive-deps": "off"
+      }
     }
     }
+  ]
 }
 }

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

@@ -164,14 +164,13 @@ export const HEADER_ITEMS = [
   {
   {
     key: 'timestamp',
     key: 'timestamp',
     label: 'Trace Start',
     label: 'Trace Start',
-    renderer: (trace: Trace) => {
-      const styles = getStyles(useTheme());
+    renderer: (trace: Trace, styles?: ReturnType<typeof getStyles>) => {
       const dateStr = formatDatetime(trace.startTime);
       const dateStr = formatDatetime(trace.startTime);
       const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
       const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
       return match ? (
       return match ? (
-        <span className={styles.TracePageHeaderOverviewItemValue}>
+        <span className={styles?.TracePageHeaderOverviewItemValue}>
           {match[1]}
           {match[1]}
-          <span className={styles.TracePageHeaderOverviewItemValueDetail}>{match[2]}</span>
+          <span className={styles?.TracePageHeaderOverviewItemValueDetail}>{match[2]}</span>
         </span>
         </span>
       ) : (
       ) : (
         dateStr
         dateStr
@@ -223,22 +222,26 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
     hideSearchButtons,
     hideSearchButtons,
   } = props;
   } = props;
 
 
+  const styles = getStyles(useTheme());
+  const links = useMemo(() => {
     if (!trace) {
     if (!trace) {
-    return null;
+      return [];
     }
     }
+    return getTraceLinks(trace);
+  }, [trace]);
 
 
-  const links = useMemo(() => getTraceLinks(trace), [trace]);
+  if (!trace) {
+    return null;
+  }
 
 
   const summaryItems =
   const summaryItems =
     !hideSummary &&
     !hideSummary &&
     !slimView &&
     !slimView &&
     HEADER_ITEMS.map(item => {
     HEADER_ITEMS.map(item => {
       const { renderer, ...rest } = item;
       const { renderer, ...rest } = item;
-      return { ...rest, value: renderer(trace) };
+      return { ...rest, value: renderer(trace, styles) };
     });
     });
 
 
-  const styles = getStyles(useTheme());
-
   const title = (
   const title = (
     <h1 className={cx(styles.TracePageHeaderTitle, canCollapse && styles.TracePageHeaderTitleCollapsible)}>
     <h1 className={cx(styles.TracePageHeaderTitle, canCollapse && styles.TracePageHeaderTitleCollapsible)}>
       <TraceName traceName={getTraceName(trace.spans)} />{' '}
       <TraceName traceName={getTraceName(trace.spans)} />{' '}

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx

@@ -96,10 +96,12 @@ type AccordianKeyValuesProps = {
 // export for tests
 // export for tests
 export function KeyValuesSummary(props: { data?: TraceKeyValuePair[] }) {
 export function KeyValuesSummary(props: { data?: TraceKeyValuePair[] }) {
   const { data } = props;
   const { data } = props;
+  const styles = getStyles(useTheme());
+
   if (!Array.isArray(data) || !data.length) {
   if (!Array.isArray(data) || !data.length) {
     return null;
     return null;
   }
   }
-  const styles = getStyles(useTheme());
+
   return (
   return (
     <ul className={styles.summary}>
     <ul className={styles.summary}>
       {data.map((item, i) => (
       {data.map((item, i) => (