Code style improvements

Author: mbrill-nt

src/options/DefaultSettings.tsx

@@ -32,7 +32,7 @@ export const DefaultSettings: PanelSettings = {
   style: {
     healthyColor: 'rgb(87, 148, 242)',
     dangerColor: 'rgb(196, 22, 42)',
-    unknownColor: 'rgb(123, 123, 138)',
+    noDataColor: 'rgb(123, 123, 138)',
   },
 
   serviceIcons: [

src/options/TypeAheadTextfield/TypeaheadTextfield.tsx

@@ -1,29 +1,29 @@
 import React from 'react';
 import Autosuggest from 'react-autosuggest';
-import { StandardEditorProps } from '@grafana/data';
+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: any;
+  context: StandardEditorContext<any>;
 }
 
 interface State {
   item: any;
   value: string;
   onChange: (value?: string) => void;
-  context: any;
+  context: StandardEditorContext<any>;
   suggestions: string[];
 }
 
 export class TypeaheadTextField extends React.PureComponent<Props, State> {
   constructor(props: Props | Readonly<Props>) {
     super(props);
 
-    var value = props.value;
+    var { value } = props;
     if (value === undefined) {
       value = props.item.defaultValue;
     }
@@ -34,47 +34,53 @@ export class TypeaheadTextField extends React.PureComponent<Props, State> {
     };
   }
 
-  renderSuggestion(suggestion: any) {
+  renderSuggestion(suggestion: string) {
     return <div>{suggestion}</div>;
   }
 
-  getColumns() {
+  getColumnNames() {
     var { data } = this.props.context;
     var series;
     var columnNames = [];
     if (data !== undefined && data.length > 0) {
       series = data[0].fields;
       for (const index in series) {
         const field = series[index];
-        if (field.config !== undefined && field.config.displayName !== undefined) {
-          columnNames.push(field.config.displayName);
+        const { config, name } = field;
+        if (config !== undefined && config.displayName !== undefined) {
+          columnNames.push(config.displayName);
         } else {
-          columnNames.push(field.name);
+          columnNames.push(name);
         }
       }
     }
     return columnNames;
   }
 
-  onChange = (event: any, { newValue, method }: any) => {
+  onChange = (event: React.FormEvent<HTMLInputElement>, { newValue }: { newValue: string }) => {
+    //TODO make this type nicer!
+    const { path } = this.props.item;
+    const { value } = event.currentTarget;
     this.setState({
-      value: event.currentTarget.value,
+      value: value,
     });
-    this.props.onChange.call(this.props.item.path, newValue);
+    this.props.onChange.call(path, newValue);
   };
 
-  getSuggestions = (value: any) => {
+  getSuggestions = (value: string) => {
     var inputValue = '';
-    if (value.value !== undefined) {
+    if (value !== undefined) {
       return [];
     }
     if (value !== undefined && value !== null && value !== '') {
       inputValue = value.trim().toLowerCase();
     }
+
     const inputLength = inputValue.length;
-    return inputLength === 0
-      ? []
-      : this.getColumns().filter(column => column.toLowerCase().slice(0, inputLength) === inputValue);
+    if (inputLength === 0 || inputValue === undefined) {
+      return [];
+    }
+    return this.getColumnNames().filter(columnName => columnName.toLowerCase().startsWith(inputValue));
   };
 
   onSuggestionsFetchRequested = (value: any) => {
@@ -83,7 +89,7 @@ export class TypeaheadTextField extends React.PureComponent<Props, State> {
     });
   };
 
-  getSuggestionValue = (suggestion: any) => {
+  getSuggestionValue = (suggestion: string) => {
     return suggestion;
   };
 
@@ -94,7 +100,7 @@ export class TypeaheadTextField extends React.PureComponent<Props, State> {
   };
 
   render() {
-    var value = this.props.value;
+    var { value } = this.props;
     if (value === undefined) {
       value = this.props.item.defaultValue;
     }

src/options/dummyDataSwitch/DummyDataSwitch.tsx

@@ -1,30 +1,30 @@
 import React from 'react';
-import { StandardEditorProps } from '@grafana/data';
+import { StandardEditorContext, StandardEditorProps } from '@grafana/data';
 import { PanelSettings, DataMapping } from '../../types';
 import { Switch } from '@grafana/ui';
 
 interface Props extends StandardEditorProps<boolean, PanelSettings> {
   item: any;
   value: boolean;
   onChange: (value?: boolean) => void;
-  context: any;
+  context: StandardEditorContext<any>;
 }
 
 interface State {
   item: any;
   value: boolean;
   dataMapping: DataMapping | undefined;
   onChange: (value?: boolean) => void;
-  context: any;
+  context: StandardEditorContext<any>;
 }
 
 export class DummyDataSwitch extends React.PureComponent<Props, State> {
   constructor(props: Props | Readonly<Props>) {
     super(props);
 
-    var dataMapping = this.props.context.options.dataMapping;
+    var { dataMapping } = props.context.options;
     if (dataMapping === undefined) {
-      dataMapping = this.props.item.defaultValue;
+      dataMapping = props.item.defaultValue;
     }
     this.state = {
       dataMapping: dataMapping,
@@ -50,31 +50,30 @@ export class DummyDataSwitch extends React.PureComponent<Props, State> {
     };
   };
 
-  onChange = (event: any) => {
-    var dataMapping = this.props.context.options.dataMapping;
-    var newValue = !dataMapping.showDummyData;
-    dataMapping = this.state.dataMapping;
+  onChange = () => {
+    var { dataMapping } = this.props.context.options;
+    const { item } = this.state;
+    const { onChange } = this.props;
+    const newValue = !dataMapping.showDummyData;
 
     if (newValue) {
       this.setState({ dataMapping: dataMapping });
       dataMapping = this.getDummyDataMapping();
     }
     dataMapping.showDummyData = newValue;
-    this.props.onChange.call(this.state.item.path, dataMapping);
+    onChange.call(item.path, dataMapping);
   };
 
   render() {
-    if (this.props.context.options.dataMapping === undefined) {
+    var { dataMapping } = this.props.context.options;
+    if (dataMapping === undefined) {
+      dataMapping = this.props.item.defaultValue;
       this.props.context.options.dataMapping = this.props.item.defaultValue;
     }
 
     return (
       <div>
-        <Switch
-          value={this.props.context.options.dataMapping.showDummyData}
-          css={{}}
-          onChange={(event: any) => this.onChange(event)}
-        />
+        <Switch value={dataMapping.showDummyData} css={{}} onChange={() => this.onChange()} />
       </div>
     );
   }

src/options/externalIconMapping/ExternalIconMapping.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { remove } from 'lodash';
-import { StandardEditorProps } from '@grafana/data';
+import { StandardEditorContext, StandardEditorProps } from '@grafana/data';
 import { PanelSettings } from '../../types';
 
 interface Props extends StandardEditorProps<string, PanelSettings> {
   item: any;
   value: string;
   onChange: (value?: string) => void;
-  context: any;
+  context: StandardEditorContext<any>;
 }
 
 export class ExternalIconMapping extends React.PureComponent<Props, Props> {
@@ -29,12 +29,12 @@ export class ExternalIconMapping extends React.PureComponent<Props, Props> {
     this.state.onChange.call(this.state.item.path, this.state.context.options.externalIcons);
   }
 
-  setPatternValue(event: any, index: number) {
+  setPatternValue(event: React.FormEvent<HTMLInputElement>, index: number) {
     this.state.context.options.externalIcons[index].pattern = event.currentTarget.value;
     this.state.onChange.call(this.state.item.path, this.state.context.options.externalIcons);
   }
 
-  setFileNameValue(event: any, index: number) {
+  setFileNameValue(event: ChangeEvent<HTMLSelectElement>, index: number) {
     this.state.context.options.externalIcons[index].filename = event.currentTarget.value;
     this.state.onChange.call(this.state.item.path, this.state.context.options.externalIcons);
   }

src/options/options.tsx

@@ -209,10 +209,10 @@ export const optionsBuilder = (builder: PanelOptionsEditorBuilder<PanelSettings>
       })
 
       .addColorPicker({
-        path: 'style.unknownColor',
+        path: 'style.noDataColor',
         name: 'No Data Color',
         category: ['Appearance'],
-        defaultValue: DefaultSettings.style.unknownColor,
+        defaultValue: DefaultSettings.style.noDataColor,
       })
 
       //Service Icon Mapping