src/*: various fixes to make ESLint happy

Author: peat-psuwit

src/components/discover-cloud/contents.js

@@ -55,12 +55,12 @@ export const TabsContent = {
           given War Room.
         </TabsContentText>
         <TabsContentText>
-          With Overview's composite charts, you can see your infrastructure from a single pane of
+          With Overview&apos;s composite charts, you can see your infrastructure from a single pane of
           glass, discover trends or anomalies, then drill down by grouping metrics by node and
           jumping to single-node dashboards for root cause analysis.
         </TabsContentText>
         <TabsContentText>
-          Here's an example of a composite chart visualizing Disk I/O bandwidth from 5 different
+          Here&apos;s an example of a composite chart visualizing Disk I/O bandwidth from 5 different
           nodes in one chart.
         </TabsContentText>
       </>
@@ -75,8 +75,8 @@ export const TabsContent = {
     text: () => (
       <TabsContentText>
         The Nodes view in Netdata Cloud lets you see and customize key metrics from any number of
-        Agent-monitored nodes and seamlessly navigate to any node's dashboard for troubleshooting
-        performance issues or anomalies using Netdata's highly-granular metrics.
+        Agent-monitored nodes and seamlessly navigate to any node&apos;s dashboard for troubleshooting
+        performance issues or anomalies using Netdata&apos;s highly-granular metrics.
       </TabsContentText>
     ),
     icon: "nodes_hollow",
@@ -88,8 +88,8 @@ export const TabsContent = {
     header: "Dashboards",
     text: () => (
       <TabsContentText>
-        With Netdata Cloud, you can build new dashboards that target your infrastructure's unique
-        needs. Put key metrics from any number of distributed systems in one place for a bird's eye
+        With Netdata Cloud, you can build new dashboards that target your infrastructure&apos;s unique
+        needs. Put key metrics from any number of distributed systems in one place for a bird&apos;s eye
         view of your infrastructure.
       </TabsContentText>
     ),
@@ -103,7 +103,7 @@ export const TabsContent = {
     text: () => (
       <TabsContentText>
         The Alerts view gives you a high level of availability and performance information for every
-        node you're monitoring with Netdata Cloud. It also offers an easy way to drill down into any
+        node you&apos;re monitoring with Netdata Cloud. It also offers an easy way to drill down into any
         particular alert by taking the user to the dedicated alert view from where the user can run
         metrics correlation or take further troubleshooting steps.
       </TabsContentText>
@@ -149,19 +149,19 @@ export const TabsContent = {
       <>
         <TabsContentText>
           Data privacy is very important to us. We firmly believe that your data belongs to you.
-          This is why we don't store any metric data in Netdata Cloud.
+          This is why we don&apos;t store any metric data in Netdata Cloud.
         </TabsContentText>
         <TabsContentText>
           Your local installations of the Netdata Agent form the basis for the Netdata Cloud. All
           the data that you see in the web browser when using Netdata Cloud, is actually streamed
           directly from the Netdata Agent to the Netdata Cloud dashboard. The data passes through
-          our systems, but it isn't stored. You can learn more about{" "}
+          our systems, but it isn&apos;t stored. You can learn more about{" "}
           <Anchor
             target="_blank"
             rel="noopener noreferrer"
             href="https://learn.netdata.cloud/docs/agent/netdata-security"
           >
-            the Agent's security design
+            the Agent&apos;s security design
           </Anchor>{" "}
           design in the Agent documentation.
         </TabsContentText>

src/components/header/ACLK/types.ts

@@ -1,4 +1,5 @@
 import { UserStatus, NodeLiveness } from "@/src/domains/dashboard/components/migration-modal"
+import React from "react"
 
 export type CloudConnectionProps = {
   userStatus: UserStatus

src/components/header/ACLK/use-cloud-connection-status.tsx

@@ -7,7 +7,7 @@ import { Text } from "@netdata/netdata-ui"
 export const makeCloudConnectionStatusInfo = ({
   nodeStatus,
   userStatus,
-  date,
+  /* date, */
 }: CloudConnectionProps): ConnectionModalStatusContent => ({
   title: "Netdata Cloud connection status",
   text: {

src/components/sidebar/space/nodes.js

@@ -32,7 +32,7 @@ const getNodes = (hosts, hostname, hostsStatus) => {
 
   const replicatedNodes = hosts
     .slice(1)
-    .map(({ hostname }, index) => ({
+    .map(({ hostname }, /* index */) => ({
       hostname,
       url: getNodeUrl(baseUrl, hostname),
       status: hostsStatus.find(host => host.hostname === hostname)?.reachable || false,

src/components/sidebar/space/prompts/offline/index.js

@@ -5,7 +5,7 @@ import NoNetwork from "./noNetwork"
 const OfflinePrompt = () => (
   <Flex alignItems="center" background={["neutral", "regentgrey"]} column gap={1} padding={[10]}>
     <TextSmall color="bright" strong textAlign="center">
-      Can't connect to Netdata Cloud
+      Can&apos;t connect to Netdata Cloud
     </TextSmall>
     <NoNetwork />
     <TextNano color="bright" textAlign="center" margin={[2, 0, 0]}>

src/domains/chart/components/chart-legend-right.tsx

@@ -137,7 +137,6 @@ export const ChartLegendRight = ({
             return (
               <Fragment key={dimensionId}>
                 {i !== 0 && <br />}
-                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
                 <span
                   title={dimensionName}
                   className={classNames(
@@ -166,7 +165,6 @@ export const ChartLegendRight = ({
                   {" "}
                   <LegendText id={chartUuid} index={i} />
                 </span>
-                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
                 <span
                   title={dimensionName}
                   className={classNames(

src/domains/chart/components/lib-charts/google-chart.tsx

@@ -6,6 +6,8 @@ import { Attributes } from "domains/chart/utils/transformDataAttributes"
 import { ChartMetadata, EasyPieChartData } from "domains/chart/chart-types"
 import { loadGoogleVisualizationApi } from "domains/chart/utils/google-visualization-loader"
 
+/* global google */
+
 interface Props {
   attributes: Attributes
   chartData: EasyPieChartData

src/domains/chart/components/lib-charts/group-box-chart/kubernetes/chartOverview.tsx

@@ -8,6 +8,7 @@
 import React, { memo } from "react"
 import styled from "styled-components"
 import { Flex, Text } from "@netdata/netdata-ui"
+import { AppStateT } from "store/app-state"
 import { useSelector } from "store/redux-separate-context"
 import { useFormatters } from "domains/chart/utils/formatters"
 import { netdataDashboard } from "domains/dashboard/utils/netdata-dashboard"

src/domains/chart/hooks/use-proceeded-chart.ts

@@ -4,6 +4,8 @@
 import React, { useRef, useCallback } from "react"
 import { useToggle } from "react-use"
 
+/* global Dygraph */
+
 const useProceededChart = (
   chartRef: any,
   propsRef: any

src/domains/chart/utils/get-pan-and-zoom-step.ts

@@ -1,3 +1,5 @@
+import React from "react"
+
 type GetPanAndZoomStep = (event: React.MouseEvent) => number
 export const getPanAndZoomStep: GetPanAndZoomStep = (event) => {
   if (event.ctrlKey) {