fix linting errors

Author: Marius Brill

src/options/TypeAheadTextfield/TypeaheadTextfield.tsx

@@ -1,28 +1,24 @@
 import React from 'react';
-import Autosuggest from 'react-autosuggest';
+import Autosuggest, { InputProps } from 'react-autosuggest';
 import { StandardEditorContext, StandardEditorProps } from '@grafana/data';
 import './TypeaheadTextfield.css';
 import { PanelSettings } from '../../types';
-
 interface Props extends StandardEditorProps<string, PanelSettings> {
   item: any;
   value: string;
   onChange: (value?: string) => void;
   context: StandardEditorContext<any>;
 }
-
 interface State {
   item: any;
   value: string;
   onChange: (value?: string) => void;
   context: StandardEditorContext<any>;
   suggestions: string[];
 }
-
 export class TypeaheadTextField extends React.PureComponent<Props, State> {
   constructor(props: Props | Readonly<Props>) {
     super(props);
-
     var { value } = props;
     if (value === undefined) {
       value = props.item.defaultValue;
@@ -33,11 +29,9 @@ export class TypeaheadTextField extends React.PureComponent<Props, State> {
       suggestions: [],
     };
   }
-
   renderSuggestion(suggestion: string) {
     return <div>{suggestion}</div>;
   }
-
   getColumnNames() {
     var { data } = this.props.context;
     var series;
@@ -56,17 +50,15 @@ export class TypeaheadTextField extends React.PureComponent<Props, State> {
     }
     return columnNames;
   }
-
-  onChange = (event: React.FormEvent<HTMLInputElement>, { newValue }: { newValue: string }) => {
+  onChange = (event: React.FormEvent<HTMLElement>, { newValue }: { newValue: string }) => {
     //TODO make this type nicer!
     const { path } = this.props.item;
-    const { value } = event.currentTarget;
+    const { value } = event.currentTarget as HTMLInputElement;
     this.setState({
       value: value,
     });
     this.props.onChange.call(path, newValue);
   };
-
   getSuggestions = (value: string) => {
     var inputValue = '';
     if (value !== undefined) {
@@ -75,44 +67,36 @@ export class TypeaheadTextField extends React.PureComponent<Props, State> {
     if (value !== undefined && value !== null && value !== '') {
       inputValue = value.trim().toLowerCase();
     }
-
     const inputLength = inputValue.length;
     if (inputLength === 0 || inputValue === undefined) {
       return [];
     }
-    return this.getColumnNames().filter(columnName => columnName.toLowerCase().startsWith(inputValue));
+    return this.getColumnNames().filter((columnName) => columnName.toLowerCase().startsWith(inputValue));
   };
-
   onSuggestionsFetchRequested = (value: any) => {
     this.setState({
       suggestions: this.getSuggestions(value),
     });
   };
-
   getSuggestionValue = (suggestion: string) => {
     return suggestion;
   };
-
   onSuggestionsClearRequested = () => {
     this.setState({
       suggestions: [],
     });
   };
-
   render() {
     var { value } = this.props;
     if (value === undefined) {
       value = this.props.item.defaultValue;
     }
-
     const suggestions = this.getSuggestions(value);
-
-    const inputProps = {
+    const inputProps: InputProps<string> = {
       placeholder: 'Enter column name...',
       value,
       onChange: this.onChange,
     };
-
     return (
       <Autosuggest
         suggestions={suggestions}

src/options/iconMapping/IconMapping.tsx

@@ -27,8 +27,8 @@ export class IconMapping extends React.PureComponent<Props, State> {
       icons: [],
     };
     fetch(assetUtils.getAssetUrl('icon_index.json'))
-      .then(response => response.json())
-      .then(data => {
+      .then((response) => response.json())
+      .then((data) => {
         data.sort();
         this.setState({
           icons: data,
@@ -75,7 +75,11 @@ export class IconMapping extends React.PureComponent<Props, State> {
     var icons = this.state.context.options[path];
     if (icons === undefined) {
       icons = this.state.item.defaultValue;
-      this.state.context.options[path] = this.state.item.defaultValue;
+      const context = this.state.context;
+      context.options[path] = this.state.item.defaultValue;
+      this.setState({
+        context: context,
+      });
     }
 
     return (
@@ -94,16 +98,18 @@ export class IconMapping extends React.PureComponent<Props, State> {
                   type="text"
                   className="input-small gf-form-input"
                   value={icon.pattern}
-                  onChange={e => this.setPatternValue(e, index)}
+                  onChange={(e) => this.setPatternValue(e, index)}
                 />
 
                 <select
                   className="input-small gf-form-input"
                   value={icon.filename}
-                  onChange={e => this.setFileNameValue(e, index)}
+                  onChange={(e) => this.setFileNameValue(e, index)}
                 >
-                  {iconNames.map((iconNames: string) => (
-                    <option value={iconNames}>{iconNames}</option>
+                  {iconNames.map((iconName: string, index: number) => (
+                    <option key={iconName + '-' + index} value={iconName}>
+                      {iconName}
+                    </option>
                   ))}
                 </select>
 

src/panel/PanelController.tsx

@@ -1,5 +1,4 @@
-import React, { LegacyRef } from 'react';
-import { PureComponent } from 'react';
+import React, { LegacyRef, PureComponent } from 'react';
 import {
   AbsoluteTimeRange,
   DataFrame,
@@ -111,7 +110,7 @@ export class PanelController extends PureComponent<Props, PanelState> {
   hasOnlyTableQueries(inputData: DataFrame[]) {
     var result = true;
 
-    _.each(inputData, dataElement => {
+    _.each(inputData, (dataElement) => {
       if (!_.has(dataElement, 'columns')) {
         result = false;
       }
@@ -131,7 +130,7 @@ export class PanelController extends PureComponent<Props, PanelState> {
   }
 
   _transformEdges(edges: IntGraphEdge[]): CyData[] {
-    const cyEdges = _.map(edges, edge => {
+    const cyEdges = _.map(edges, (edge) => {
       const cyEdge = {
         group: 'edges',
         data: {
@@ -150,7 +149,7 @@ export class PanelController extends PureComponent<Props, PanelState> {
   }
 
   _transformNodes(nodes: IntGraphNode[]): CyData[] {
-    const cyNodes = _.map(nodes, node => {
+    const cyNodes = _.map(nodes, (node) => {
       const result: CyData = {
         group: 'nodes',
         data: {
@@ -177,7 +176,7 @@ export class PanelController extends PureComponent<Props, PanelState> {
 
       if (cyNode) {
         element.data(cyNode.data);
-        _.remove(inputArray, n => n.data.id === cyNode.data.id);
+        _.remove(inputArray, (n) => n.data.id === cyNode.data.id);
         elements.push(element);
       } else {
         element.remove();

src/panel/asset_utils.tsx

@@ -16,7 +16,7 @@ export default {
       return this.getAssetUrl(type);
     }
 
-    const icon = find(externalIcons, icon => icon.pattern.toLowerCase() === type.toLowerCase());
+    const icon = find(externalIcons, (icon) => icon.pattern.toLowerCase() === type.toLowerCase());
 
     if (icon !== undefined) {
       return this.getAssetUrl(icon.filename + '.png');

src/panel/canvas/graph_canvas.ts

@@ -256,8 +256,8 @@ export default class CanvasDrawer {
     const edges = this.cytoscape.edges().toArray();
     const hasSelection = this.selectionNeighborhood.size() > 0;
 
-    const transparentEdges = edges.filter(edge => hasSelection && !this.selectionNeighborhood.has(edge));
-    const opaqueEdges = edges.filter(edge => !hasSelection || this.selectionNeighborhood.has(edge));
+    const transparentEdges = edges.filter((edge) => hasSelection && !this.selectionNeighborhood.has(edge));
+    const opaqueEdges = edges.filter((edge) => !hasSelection || this.selectionNeighborhood.has(edge));
 
     ctx.globalAlpha = 0.25;
     this._drawEdges(ctx, transparentEdges, now);

src/panel/canvas/particle_engine.ts

@@ -59,7 +59,7 @@ export default class ParticleEngine {
     const cy = this.drawer.cytoscape;
 
     const now = Date.now();
-    cy.edges().forEach(edge => {
+    cy.edges().forEach((edge) => {
       let particles: Particles = edge.data('particles');
       const metrics: IntGraphMetrics = edge.data('metrics');
 
@@ -109,9 +109,9 @@ export default class ParticleEngine {
     const cy = this.drawer.cytoscape;
 
     const count = _(cy.edges())
-      .map(edge => edge.data('particles'))
+      .map((edge) => edge.data('particles'))
       .filter()
-      .map(particleArray => particleArray.normal.length + particleArray.danger.length)
+      .map((particleArray) => particleArray.normal.length + particleArray.danger.length)
       .sum();
 
     return count;

src/panel/layout_options.ts

@@ -10,15 +10,15 @@ const options = {
   nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node
 
   // layout event callbacks
-  ready: function() {}, // on layoutready
-  stop: function() {}, // on layoutstop
+  ready: function () {}, // on layoutready
+  stop: function () {}, // on layoutstop
 
   // positioning options
   randomize: false, // use random node positions at beginning of layout
   avoidOverlap: true, // if true, prevents overlap of node bounding boxes
   handleDisconnected: true, // if true, avoids disconnected components from overlapping
   convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
-  nodeSpacing: function(node: any) {
+  nodeSpacing: function (node: any) {
     return 50;
   }, // extra spacing around nodes
   flow: undefined as undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }

src/panel/serviceDependencyGraph/ServiceDependencyGraph.tsx

@@ -1,7 +1,6 @@
 import CanvasDrawer from 'panel/canvas/graph_canvas';
 import cytoscape, { EdgeCollection, EdgeSingular, ElementDefinition, NodeSingular } from 'cytoscape';
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { PanelController } from '../PanelController';
 import cyCanvas from 'cytoscape-canvas';
 import cola from 'cytoscape-cola';
@@ -142,7 +141,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
       this.runLayout();
     } else {
       if (cyNodes.length > 0) {
-        _.each(updatedNodes, node => {
+        _.each(updatedNodes, (node) => {
           node.lock();
         });
         this.runLayout(true);
@@ -152,7 +151,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
   }
 
   _transformNodes(nodes: IntGraphNode[]): ElementDefinition[] {
-    const cyNodes: ElementDefinition[] = _.map(nodes, node => {
+    const cyNodes: ElementDefinition[] = _.map(nodes, (node) => {
       const result: ElementDefinition = {
         group: 'nodes',
         data: {
@@ -171,7 +170,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
   }
 
   _transformEdges(edges: IntGraphEdge[]): ElementDefinition[] {
-    const cyEdges: ElementDefinition[] = _.map(edges, edge => {
+    const cyEdges: ElementDefinition[] = _.map(edges, (edge) => {
       const cyEdge: ElementDefinition = {
         group: 'edges',
         data: {
@@ -199,7 +198,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
 
       if (cyNode) {
         element.data(cyNode.data);
-        _.remove(inputArray, n => n.data.id === cyNode.data.id);
+        _.remove(inputArray, (n) => n.data.id === cyNode.data.id);
         elements.push(element);
       } else {
         element.remove();
@@ -247,7 +246,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
     const options = {
       ...layoutOptions,
 
-      stop: function() {
+      stop: function () {
         if (unlockNodes) {
           that.unlockNodes();
         }
@@ -385,7 +384,7 @@ export class ServiceDependencyGraph extends PureComponent<PanelState, PanelState
     return (
       <div className="graph-container">
         <div className="service-dependency-graph">
-          <div className="canvas-container" ref={ref => (this.ref = ref)}></div>
+          <div className="canvas-container" ref={(ref) => (this.ref = ref)}></div>
           <div className="zoom-button-container">
             <button className="btn navbar-button width-100" onClick={() => this.toggleAnimation()}>
               <i className={this.state.animateButtonClass}></i>

src/panel/statistics/IncomingStatistics.tsx

@@ -3,7 +3,7 @@ import { TableContent } from 'types';
 
 export const NodeStatistics = (receiving: TableContent[]) => {
   return (
-    <div>
+    <>
       <div className="secondHeader--selection">Incoming Statistics</div>
       {() => {
         if (receiving.length > 0) {
@@ -15,8 +15,8 @@ export const NodeStatistics = (receiving: TableContent[]) => {
                 <th className="table--th--selectionSmall">Requests</th>
                 <th className="table--th--selectionSmall">Error Rate</th>
               </tr>
-              {receiving.map((node: TableContent) => (
-                <tr>
+              {receiving.map((node: TableContent, index: number) => (
+                <tr key={'row-' + index}>
                   <td className="table--td--selection" title="{{node.name}}">
                     {node.name}
                   </td>
@@ -30,6 +30,6 @@ export const NodeStatistics = (receiving: TableContent[]) => {
         }
         return <div className="no-data--selection">No incoming statistics available.</div>;
       }}
-    </div>
+    </>
   );
 };

src/panel/statistics/SortableTable.tsx

@@ -23,7 +23,7 @@ function sort(a: string, b: string, order: string, ignoreLiteral: string) {
 }
 
 export const SortableTable: React.FC<SortableTableProps> = ({ tableHeaders, data }) => {
-  tableHeaders.forEach(function(value, i) {
+  tableHeaders.forEach(function (value, i) {
     value.classes = 'table--td--selection';
     if (i !== 0) {
       value.sortFunc = (a: string, b: string, order: string, _dataField: any, _rowA: any) => {