UI: Fixing warnings in react-app

pkg/ui/react-app/src/components/ListTree.tsx

@@ -27,7 +27,7 @@ const ListTree: React.FC<NodeProps> = ({ id, node }) => {
   };
 
   // Constructing List Items recursively.
-  const mapper = (nodes: QueryTree[], parentId?: any, lvl?: any) => {
+  const mapper = (nodes: QueryTree[], parentId?: string, lvl?: number) => {
     return nodes.map((node: QueryTree, index: number) => {
       const id = `${index}-${parentId ? parentId : 'top'}`.replace(/[^a-zA-Z0-9-_]/g, '');
       const item = (
@@ -36,7 +36,7 @@ const ListTree: React.FC<NodeProps> = ({ id, node }) => {
             className={`bg-transparent p-0 border-0 ${parentId ? `rounded-0 ${lvl ? 'border-bottom-0' : ''}` : ''}`}
           >
             {
-              <div className={`d-flex align-items-center`} style={{ paddingLeft: `${25 * lvl}px` }}>
+              <div className={`d-flex align-items-center`} style={{ paddingLeft: `${25 * (lvl || 0)}px` }}>
                 {node.children && (
                   <div className="pl-0 btn text-primary" style={{ cursor: 'inherit' }} color="link">
                     {mapping[id] ? '\u002B' : '\u002D'}

pkg/ui/react-app/src/components/withStatusIndicator.tsx

@@ -11,7 +11,9 @@ interface StatusIndicatorProps {
 }
 
 export const withStatusIndicator =
-  <T,>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> =>
+  <T extends Record<string, any>>(
+    Component: ComponentType<T>
+  ): FC<Omit<React.ComponentProps<typeof Component>, keyof StatusIndicatorProps> & StatusIndicatorProps> =>
   ({ error, isLoading, customErrorMsg, componentTitle, ...rest }: StatusIndicatorProps) => {
     if (error) {
       return (
@@ -38,5 +40,6 @@ export const withStatusIndicator =
         />
       );
     }
-    return <Component {...(rest as any)} />;
+
+    return <Component {...(rest as T)} />;
   };

pkg/ui/react-app/src/hooks/useFetch.ts

@@ -9,7 +9,7 @@ export interface FetchState<T> {
 }
 
 export const useFetch = <T>(url: string, options?: RequestInit): FetchState<T> => {
-  const [response, setResponse] = useState<APIResponse<T>>({ status: 'start fetching' } as any);
+  const [response, setResponse] = useState<APIResponse<T>>({ status: 'start fetching' } as APIResponse<T>);
   const [error, setError] = useState<Error>();
   const [isLoading, setIsLoading] = useState<boolean>(true);
 

pkg/ui/react-app/src/pages/alerts/AlertContents.tsx

@@ -8,7 +8,7 @@ import { KVSearch } from '@nexucis/kvsearch';
 import CustomInfiniteScroll, { InfiniteScrollItemsProps } from '../../components/CustomInfiniteScroll';
 import SearchBar from '../../components/SearchBar';
 
-export type RuleState = keyof RuleStatus<any>;
+export type RuleState = keyof RuleStatus<number>;
 
 export interface RuleStatus<T> {
   firing: T;
@@ -160,7 +160,7 @@ interface GroupInfoProps {
 }
 
 export const GroupInfo: FC<GroupInfoProps> = ({ rules, children }) => {
-  const statesCounter = rules.reduce<any>(
+  const statesCounter = rules.reduce<RuleStatus<number>>(
     (acc, r) => {
       return {
         ...acc,
@@ -170,6 +170,7 @@ export const GroupInfo: FC<GroupInfoProps> = ({ rules, children }) => {
     {
       firing: 0,
       pending: 0,
+      inactive: 0,
     }
   );
 

pkg/ui/react-app/src/pages/config/Config.tsx

@@ -27,7 +27,7 @@ export const ConfigContent: FC<ConfigContentProps> = ({ error, data }) => {
       <h2>
         Configuration&nbsp;
         <CopyToClipboard
-          text={config!}
+          text={config || ''}
           onCopy={(_, result) => {
             setCopied(result);
             setTimeout(setCopied, 1500);

pkg/ui/react-app/src/pages/graph/CMTheme.tsx

@@ -12,7 +12,7 @@ export const baseTheme = EditorView.theme({
   '&': {
     '&.cm-focused': {
       outline: 'none',
-      outline_fallback: 'none',
+      outlineFallback: 'none',
     },
   },
   '.cm-scroller': {

pkg/ui/react-app/src/pages/graph/GraphControls.tsx

@@ -63,7 +63,9 @@ class GraphControls extends Component<GraphControlsProps> {
   };
 
   changeRangeInput = (range: number): void => {
-    this.rangeRef.current!.value = formatDuration(range);
+    if (this.rangeRef.current) {
+      this.rangeRef.current.value = formatDuration(this.props.range);
+    }
   };
 
   increaseRange = (): void => {
@@ -91,7 +93,9 @@ class GraphControls extends Component<GraphControlsProps> {
       this.changeRangeInput(this.props.range);
     }
     if (prevProps.resolution !== this.props.resolution) {
-      this.resolutionRef.current!.value = this.props.resolution !== null ? this.props.resolution.toString() : '';
+      if (this.resolutionRef.current) {
+        this.resolutionRef.current.value = this.props.resolution !== null ? this.props.resolution.toString() : '';
+      }
     }
   }
 
@@ -112,7 +116,11 @@ class GraphControls extends Component<GraphControlsProps> {
           <Input
             defaultValue={formatDuration(this.props.range)}
             innerRef={this.rangeRef}
-            onBlur={() => this.onChangeRangeInput(this.rangeRef.current!.value)}
+            onBlur={() => {
+              if (this.rangeRef.current) {
+                this.onChangeRangeInput(this.rangeRef.current.value);
+              }
+            }}
           />
 
           <InputGroupAddon addonType="append">
@@ -136,7 +144,10 @@ class GraphControls extends Component<GraphControlsProps> {
           defaultValue={this.props.resolution !== null ? this.props.resolution.toString() : ''}
           innerRef={this.resolutionRef}
           onBlur={() => {
-            const res = parseInt(this.resolutionRef.current!.value);
+            if (!this.resolutionRef.current) {
+              return;
+            }
+            const res = parseInt(this.resolutionRef.current.value);
             this.props.onChangeResolution(res ? res : null);
           }}
           bsSize="sm"

pkg/ui/react-app/src/pages/graph/GraphHelpers.ts

@@ -137,7 +137,8 @@ export const getOptions = (stacked: boolean, useLocalTime: boolean): jquery.flot
 };
 
 export const normalizeData = ({ queryParams, data }: GraphProps): GraphSeries[] => {
-  const { startTime, endTime, resolution } = queryParams!;
+  // use default values
+  const { startTime = 0, endTime = 0, resolution = 0 } = queryParams || {};
   return data.result.map(({ values, histograms, metric }, index) => {
     // Insert nulls for all missing steps.
     const data = [];

pkg/ui/react-app/src/pages/graph/Panel.tsx

@@ -205,7 +205,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     const params: URLSearchParams = new URLSearchParams({
       query: expr,
       dedup: this.props.options.useDeduplication.toString(),
-      partial_response: this.props.options.usePartialResponse.toString(),
+      partialResponse: this.props.options.usePartialResponse.toString(),
     });
 
     // Add storeMatches to query params.
@@ -415,7 +415,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     const params: URLSearchParams = new URLSearchParams({
       query: this.state.exprInputValue,
       dedup: this.props.options.useDeduplication.toString(),
-      partial_response: this.props.options.usePartialResponse.toString(),
+      partialResponse: this.props.options.usePartialResponse.toString(),
     });
 
     // Add storeMatches to query params.

pkg/ui/react-app/src/pages/graph/SeriesName.tsx

@@ -27,26 +27,26 @@ const SeriesName: FC<SeriesNameProps> = ({ labels, format }) => {
       }
     }
 
+    if (labels === null) {
+      return <>scalar</>;
+    }
+
     return (
       <div>
-        <span className="legend-metric-name">{labels!.__name__ || ''}</span>
+        <span className="legend-metric-name">{labels.__name__ || ''}</span>
         <span className="legend-label-brace">{'{'}</span>
         {labelNodes}
         <span className="legend-label-brace">{'}'}</span>
       </div>
     );
   };
 
-  if (labels === null) {
-    return <>scalar</>;
-  }
-
   if (format) {
     return renderFormatted();
   }
   // Return a simple text node. This is much faster to scroll through
   // for longer lists (hundreds of items).
-  return <>{metricToSeriesName(labels!)}</>;
+  return <>{labels ? metricToSeriesName(labels) : null}</>;
 };
 
 export default SeriesName;

pkg/ui/react-app/src/pages/graph/TimeInput.tsx

@@ -60,8 +60,9 @@ class TimeInput extends Component<TimeInputProps> {
   };
 
   componentDidMount(): void {
-    this.$time = $(this.timeInputRef.current!);
-
+    if (this.timeInputRef.current) {
+      this.$time = $(this.timeInputRef.current);
+    }
     this.$time.datetimepicker({
       icons: {
         today: 'fas fa-calendar-check',

pkg/ui/react-app/src/pages/targets/Targets.tsx

@@ -1,9 +1,7 @@
 import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
-import Filter from './Filter';
 import ScrapePoolList from './ScrapePoolList';
 import PathPrefixProps from '../../types/PathPrefixProps';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
 
 const Targets: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
   const scrapePoolListProps = { pathPrefix };

pkg/ui/react-app/src/thanos/pages/blocks/helpers.ts

@@ -152,7 +152,7 @@ export const getFilteredBlockPools = (
   filteredBlocks: Block[]
 ): { [source: string]: BlocksPool } => {
   const newblockPools: { [source: string]: BlocksPool } = {};
-  Object.keys(blockPools).map((key: string) => {
+  Object.keys(blockPools).forEach((key: string) => {
     const poolArrayIndex = blockPools[key];
     const poolArray = poolArrayIndex[Object.keys(poolArrayIndex)[0]];
     for (let i = 0; i < filteredBlocks.length; i++) {

pkg/ui/react-app/src/thanos/pages/errorBoundary/ErrorBoundary.tsx

@@ -1,14 +1,18 @@
-import React, { ErrorInfo } from 'react';
+import React, { ErrorInfo, ReactNode } from 'react';
 import { Container, UncontrolledCollapse, Button } from 'reactstrap';
 import styles from './ErrorBoundary.module.css';
 
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
 interface ErrorState {
   error: Error | null;
   errorInfo: ErrorInfo | null;
 }
 
-class ErrorBoundary extends React.Component<any, ErrorState> {
-  constructor(props: any) {
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorState> {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = {
       error: null,
@@ -22,6 +26,7 @@ class ErrorBoundary extends React.Component<any, ErrorState> {
       errorInfo,
     });
   }
+
   render(): React.ReactNode {
     if (this.state.errorInfo) {
       return (