thanos-io / thanos

UI: Warnings when building react app

Issue Summary: UI Warnings in React App Build

Issue Title: Warnings when building react app Opened by: jacobbaungard Date: January 16, 2024

Current Situation:

The React application for the Thanos project is generating multiple warnings during compilation, primarily relating to TypeScript and code style issues. Addressing these warnings is crucial to maintaining code quality and allowing the removal of CI=false from the build step. This will help ensure that new code contributions do not introduce additional warnings.

List of Key Warnings:

  1. TypeScript Issues: Numerous instances of Unexpected any indicating the use of the any type across various files, suggesting that more specific types should be defined.
  • For example:
  • src/components/ListTree.tsx: Line 30:50
  • src/hooks/useFetch.ts: Line 12:92
  • src/pages/status/Status.tsx: Line 15:42
  1. Non-null Assertions: Multiple occurrences of forbidden non-null assertions.
  • Example:
  • src/pages/config/Config.tsx: Line 30:17
  1. Naming Conventions: Warnings regarding identifiers not following camelCase.
  • Example:
  • src/pages/graph/CMTheme.tsx: Line 15:7, where outline_fallback is highlighted.
  1. Unused Variables: Instances of defined but unused variables.
  • Example:
  • src/pages/targets/Targets.tsx: Line 3:8 where Filter is defined but not used.
  1. Array Callback Issues: Missing return values in array mapping functions.
  • Example:
  • src/thanos/pages/blocks/helpers.ts: Line 155:45

Contributors Involved:

  • AbhiRam162105 expressed interest in fixing the issue on February 12, 2024.
  • 0ZeKa0 also requested to work on the issue on May 25, 2024.
  • bdharsan04 proposed collaboration on July 5, 2024, to work on the issue.
  • NishantBansal2003 inquired about testing changes on July 23, 2024, seeking clarification on commands to run.

Recommended Next Steps:

  1. Identify and replace usages of the any type with more specific types throughout the affected components and hooks.
  2. Remove or refactor non-null assertions as per TypeScript best practices.
  3. Ensure proper naming conventions are followed throughout the codebase.
  4. Address any instances of unused variables to clean up the code.
  5. For testing, use the recommended commands (make check-react-app and make react-app-test) to verify that changes do not break existing functionality, alongside any additional relevant tests.

This compilation of warnings reflects a necessary update plan for the React application, aimed at enhancing maintainability and reducing technical debt.