WIP Update tslint (#12922)

* Interface linting rule

* fix: changed model names in store files so that the interface names do not conflict with the model names

package.json

@@ -169,7 +169,8 @@
     "slate-react": "^0.12.4",
     "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
-    "tinycolor2": "^1.4.1"
+    "tinycolor2": "^1.4.1",
+    "tslint-react": "^3.6.0"
   },
   "resolutions": {
     "caniuse-db": "1.0.30000772"

public/app/containers/AlertRuleList/AlertRuleList.tsx

@@ -3,14 +3,14 @@ import { hot } from 'react-hot-loader';
 import classNames from 'classnames';
 import { inject, observer } from 'mobx-react';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import { IAlertRule } from 'app/stores/AlertListStore/AlertListStore';
+import { AlertRule } from 'app/stores/AlertListStore/AlertListStore';
 import appEvents from 'app/core/app_events';
-import IContainerProps from 'app/containers/IContainerProps';
+import ContainerProps from 'app/containers/ContainerProps';
 import Highlighter from 'react-highlight-words';
 
 @inject('view', 'nav', 'alertList')
 @observer
-export class AlertRuleList extends React.Component<IContainerProps, any> {
+export class AlertRuleList extends React.Component<ContainerProps, any> {
   stateFilters = [
     { text: 'All', value: 'all' },
     { text: 'OK', value: 'ok' },
@@ -109,7 +109,7 @@ function AlertStateFilterOption({ text, value }) {
 }
 
 export interface AlertRuleItemProps {
-  rule: IAlertRule;
+  rule: AlertRule;
   search: string;
 }
 

public/app/containers/IContainerProps.ts → public/app/containers/ContainerProps.ts

@@ -6,7 +6,7 @@ import { AlertListStore } from './../stores/AlertListStore/AlertListStore';
 import { ViewStore } from './../stores/ViewStore/ViewStore';
 import { FolderStore } from './../stores/FolderStore/FolderStore';
 
-interface IContainerProps {
+interface ContainerProps {
   search: typeof SearchStore.Type;
   serverStats: typeof ServerStatsStore.Type;
   nav: typeof NavStore.Type;
@@ -17,4 +17,4 @@ interface IContainerProps {
   backendSrv: any;
 }
 
-export default IContainerProps;
+export default ContainerProps;

public/app/containers/Explore/Explore.tsx

@@ -63,7 +63,7 @@ function parseUrlState(initial: string | undefined) {
   return { datasource: null, queries: [], range: DEFAULT_RANGE };
 }
 
-interface IExploreState {
+interface ExploreState {
   datasource: any;
   datasourceError: any;
   datasourceLoading: boolean | null;
@@ -88,12 +88,12 @@ interface IExploreState {
   tableResult: any;
 }
 
-export class Explore extends React.Component<any, IExploreState> {
+export class Explore extends React.Component<any, ExploreState> {
   el: any;
 
   constructor(props) {
     super(props);
-    const initialState: IExploreState = props.initialState;
+    const initialState: ExploreState = props.initialState;
     const { datasource, queries, range } = parseUrlState(props.routeParams.state);
     this.state = {
       datasource: null,

public/app/containers/ManageDashboards/FolderPermissions.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { hot } from 'react-hot-loader';
 import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
-import IContainerProps from 'app/containers/IContainerProps';
+import ContainerProps from 'app/containers/ContainerProps';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import Permissions from 'app/core/components/Permissions/Permissions';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
@@ -12,7 +12,7 @@ import SlideDown from 'app/core/components/Animations/SlideDown';
 
 @inject('nav', 'folder', 'view', 'permissions')
 @observer
-export class FolderPermissions extends Component<IContainerProps, any> {
+export class FolderPermissions extends Component<ContainerProps, any> {
   constructor(props) {
     super(props);
     this.handleAddPermission = this.handleAddPermission.bind(this);

public/app/containers/ManageDashboards/FolderSettings.tsx

@@ -3,13 +3,13 @@ import { hot } from 'react-hot-loader';
 import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import IContainerProps from 'app/containers/IContainerProps';
+import ContainerProps from 'app/containers/ContainerProps';
 import { getSnapshot } from 'mobx-state-tree';
 import appEvents from 'app/core/app_events';
 
 @inject('nav', 'folder', 'view')
 @observer
-export class FolderSettings extends React.Component<IContainerProps, any> {
+export class FolderSettings extends React.Component<ContainerProps, any> {
   formSnapshot: any;
 
   componentDidMount() {

public/app/containers/ServerStats/ServerStats.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { hot } from 'react-hot-loader';
 import { inject, observer } from 'mobx-react';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import IContainerProps from 'app/containers/IContainerProps';
+import ContainerProps from 'app/containers/ContainerProps';
 
 @inject('nav', 'serverStats')
 @observer
-export class ServerStats extends React.Component<IContainerProps, any> {
+export class ServerStats extends React.Component<ContainerProps, any> {
   constructor(props) {
     super(props);
     const { nav, serverStats } = this.props;

public/app/containers/Teams/TeamGroupSync.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
 import { observer } from 'mobx-react';
-import { ITeam, ITeamGroup } from 'app/stores/TeamsStore/TeamsStore';
+import { Team, TeamGroup } from 'app/stores/TeamsStore/TeamsStore';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 interface Props {
-  team: ITeam;
+  team: Team;
 }
 
 interface State {
@@ -27,7 +27,7 @@ export class TeamGroupSync extends React.Component<Props, State> {
     this.props.team.loadGroups();
   }
 
-  renderGroup(group: ITeamGroup) {
+  renderGroup(group: TeamGroup) {
     return (
       <tr key={group.groupId}>
         <td>{group.groupId}</td>
@@ -53,7 +53,7 @@ export class TeamGroupSync extends React.Component<Props, State> {
     this.setState({ isAdding: false, newGroupId: '' });
   };
 
-  onRemoveGroup = (group: ITeamGroup) => {
+  onRemoveGroup = (group: TeamGroup) => {
     this.props.team.removeGroup(group.groupId);
   };
 

public/app/containers/Teams/TeamList.tsx

@@ -3,7 +3,7 @@ import { hot } from 'react-hot-loader';
 import { inject, observer } from 'mobx-react';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import { NavStore } from 'app/stores/NavStore/NavStore';
-import { TeamsStore, ITeam } from 'app/stores/TeamsStore/TeamsStore';
+import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 
@@ -27,7 +27,7 @@ export class TeamList extends React.Component<Props, any> {
     this.props.teams.loadTeams();
   }
 
-  deleteTeam(team: ITeam) {
+  deleteTeam(team: Team) {
     this.props.backendSrv.delete('/api/teams/' + team.id).then(this.fetchTeams.bind(this));
   }
 
@@ -35,7 +35,7 @@ export class TeamList extends React.Component<Props, any> {
     this.props.teams.setSearchQuery(evt.target.value);
   };
 
-  renderTeamMember(team: ITeam): JSX.Element {
+  renderTeamMember(team: Team): JSX.Element {
     let teamUrl = `org/teams/edit/${team.id}`;
 
     return (

public/app/containers/Teams/TeamMembers.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
 import { observer } from 'mobx-react';
-import { ITeam, ITeamMember } from 'app/stores/TeamsStore/TeamsStore';
+import { Team, TeamMember } from 'app/stores/TeamsStore/TeamsStore';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { UserPicker, User } from 'app/core/components/Picker/UserPicker';
 import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 
 interface Props {
-  team: ITeam;
+  team: Team;
 }
 
 interface State {
@@ -30,15 +30,15 @@ export class TeamMembers extends React.Component<Props, State> {
     this.props.team.setSearchQuery(evt.target.value);
   };
 
-  removeMember(member: ITeamMember) {
+  removeMember(member: TeamMember) {
     this.props.team.removeMember(member);
   }
 
-  removeMemberConfirmed(member: ITeamMember) {
+  removeMemberConfirmed(member: TeamMember) {
     this.props.team.removeMember(member);
   }
 
-  renderMember(member: ITeamMember) {
+  renderMember(member: TeamMember) {
     return (
       <tr key={member.userId}>
         <td className="width-4 text-center">

public/app/containers/Teams/TeamPages.tsx

@@ -5,7 +5,7 @@ import { inject, observer } from 'mobx-react';
 import config from 'app/core/config';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import { NavStore } from 'app/stores/NavStore/NavStore';
-import { TeamsStore, ITeam } from 'app/stores/TeamsStore/TeamsStore';
+import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore';
 import { ViewStore } from 'app/stores/ViewStore/ViewStore';
 import TeamMembers from './TeamMembers';
 import TeamSettings from './TeamSettings';
@@ -40,7 +40,7 @@ export class TeamPages extends React.Component<Props, any> {
     nav.initTeamPage(this.getCurrentTeam(), this.currentPage, this.isSyncEnabled);
   }
 
-  getCurrentTeam(): ITeam {
+  getCurrentTeam(): Team {
     const { teams, view } = this.props;
     return teams.map.get(view.routeParams.get('id'));
   }

public/app/containers/Teams/TeamSettings.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
 import { observer } from 'mobx-react';
-import { ITeam } from 'app/stores/TeamsStore/TeamsStore';
+import { Team } from 'app/stores/TeamsStore/TeamsStore';
 import { Label } from 'app/core/components/Forms/Forms';
 
 interface Props {
-  team: ITeam;
+  team: Team;
 }
 
 @observer

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -1,34 +1,37 @@
 import React, { Component } from 'react';
 
-export interface IProps {
-    model: any;
+export interface Props {
+  model: any;
 }
 
-class EmptyListCTA extends Component<IProps, any> {
-    render() {
-        const {
-            title,
-            buttonIcon,
-            buttonLink,
-            buttonTitle,
-            proTip,
-            proTipLink,
-            proTipLinkTitle,
-            proTipTarget
-        } = this.props.model;
-        return (
-            <div className="empty-list-cta">
-                <div className="empty-list-cta__title">{title}</div>
-                <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
-                <div className="empty-list-cta__pro-tip">
-                    <i className="fa fa-rocket" /> ProTip: {proTip}
-                    <a className="text-link empty-list-cta__pro-tip-link"
-                        href={proTipLink}
-                        target={proTipTarget}>{proTipLinkTitle}</a>
-                </div>
-            </div>
-        );
-    }
+class EmptyListCTA extends Component<Props, any> {
+  render() {
+    const {
+      title,
+      buttonIcon,
+      buttonLink,
+      buttonTitle,
+      proTip,
+      proTipLink,
+      proTipLinkTitle,
+      proTipTarget,
+    } = this.props.model;
+    return (
+      <div className="empty-list-cta">
+        <div className="empty-list-cta__title">{title}</div>
+        <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
+          <i className={buttonIcon} />
+          {buttonTitle}
+        </a>
+        <div className="empty-list-cta__pro-tip">
+          <i className="fa fa-rocket" /> ProTip: {proTip}
+          <a className="text-link empty-list-cta__pro-tip-link" href={proTipLink} target={proTipTarget}>
+            {proTipLinkTitle}
+          </a>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default EmptyListCTA;

public/app/core/components/PageHeader/PageHeader.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import appEvents from 'app/core/app_events';
 import { toJS } from 'mobx';
 
-export interface IProps {
+export interface Props {
   model: NavModel;
 }
 
@@ -82,7 +82,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
 };
 
 @observer
-export default class PageHeader extends React.Component<IProps, any> {
+export default class PageHeader extends React.Component<Props, any> {
   constructor(props) {
     super(props);
   }

public/app/core/components/PasswordStrength.tsx

@@ -1,32 +1,31 @@
 import React from 'react';
 
-export interface IProps {
+export interface Props {
   password: string;
 }
 
-export class PasswordStrength extends React.Component<IProps, any> {
-
+export class PasswordStrength extends React.Component<Props, any> {
   constructor(props) {
     super(props);
   }
 
   render() {
     const { password } = this.props;
-    let strengthText = "strength: strong like a bull.";
-    let strengthClass = "password-strength-good";
+    let strengthText = 'strength: strong like a bull.';
+    let strengthClass = 'password-strength-good';
 
     if (!password) {
       return null;
     }
 
     if (password.length <= 8) {
-      strengthText = "strength: you can do better.";
-      strengthClass = "password-strength-ok";
+      strengthText = 'strength: you can do better.';
+      strengthClass = 'password-strength-ok';
     }
 
     if (password.length < 4) {
-      strengthText = "strength: weak sauce.";
-      strengthClass = "password-strength-bad";
+      strengthText = 'strength: weak sauce.';
+      strengthClass = 'password-strength-bad';
     }
 
     return (
@@ -36,5 +35,3 @@ export class PasswordStrength extends React.Component<IProps, any> {
     );
   }
 }
-
-

public/app/core/components/Permissions/DisabledPermissionsListItem.tsx

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
 import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore';
 
-export interface IProps {
+export interface Props {
   item: any;
 }
 
-export default class DisabledPermissionListItem extends Component<IProps, any> {
+export default class DisabledPermissionListItem extends Component<Props, any> {
   render() {
     const { item } = this.props;
 

public/app/core/components/Permissions/Permissions.tsx

@@ -20,7 +20,7 @@ export interface DashboardAcl {
   sortRank?: number;
 }
 
-export interface IProps {
+export interface Props {
   dashboardId: number;
   folderInfo?: FolderInfo;
   permissions?: any;
@@ -29,7 +29,7 @@ export interface IProps {
 }
 
 @observer
-class Permissions extends Component<IProps, any> {
+class Permissions extends Component<Props, any> {
   constructor(props) {
     super(props);
     const { dashboardId, isFolder, folderInfo } = this.props;

public/app/core/components/Permissions/PermissionsList.tsx

@@ -4,7 +4,7 @@ import DisabledPermissionsListItem from './DisabledPermissionsListItem';
 import { observer } from 'mobx-react';
 import { FolderInfo } from './FolderInfo';
 
-export interface IProps {
+export interface Props {
   permissions: any[];
   removeItem: any;
   permissionChanged: any;
@@ -13,7 +13,7 @@ export interface IProps {
 }
 
 @observer
-class PermissionsList extends Component<IProps, any> {
+class PermissionsList extends Component<Props, any> {
   render() {
     const { permissions, removeItem, permissionChanged, fetching, folderInfo } = this.props;
 

public/app/core/components/Picker/DescriptionOption.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-export interface IProps {
+export interface Props {
   onSelect: any;
   onFocus: any;
   option: any;
@@ -8,7 +8,7 @@ export interface IProps {
   className: any;
 }
 
-class DescriptionOption extends Component<IProps, any> {
+class DescriptionOption extends Component<Props, any> {
   constructor(props) {
     super(props);
     this.handleMouseDown = this.handleMouseDown.bind(this);

public/app/core/components/Picker/PickerOption.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-export interface IProps {
+export interface Props {
   onSelect: any;
   onFocus: any;
   option: any;
@@ -8,7 +8,7 @@ export interface IProps {
   className: any;
 }
 
-class UserPickerOption extends Component<IProps, any> {
+class UserPickerOption extends Component<Props, any> {
   constructor(props) {
     super(props);
     this.handleMouseDown = this.handleMouseDown.bind(this);

public/app/core/components/TagFilter/TagBadge.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import tags from 'app/core/utils/tags';
 
-export interface IProps {
+export interface Props {
   label: string;
   removeIcon: boolean;
   count: number;
   onClick: any;
 }
 
-export class TagBadge extends React.Component<IProps, any> {
+export class TagBadge extends React.Component<Props, any> {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);

public/app/core/components/TagFilter/TagFilter.tsx

@@ -4,13 +4,13 @@ import { Async } from 'react-select';
 import { TagValue } from './TagValue';
 import { TagOption } from './TagOption';
 
-export interface IProps {
+export interface Props {
   tags: string[];
   tagOptions: () => any;
   onSelect: (tag: string) => void;
 }
 
-export class TagFilter extends React.Component<IProps, any> {
+export class TagFilter extends React.Component<Props, any> {
   inlineTags: boolean;
 
   constructor(props) {

public/app/core/components/TagFilter/TagOption.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TagBadge } from './TagBadge';
 
-export interface IProps {
+export interface Props {
   onSelect: any;
   onFocus: any;
   option: any;
@@ -9,7 +9,7 @@ export interface IProps {
   className: any;
 }
 
-export class TagOption extends React.Component<IProps, any> {
+export class TagOption extends React.Component<Props, any> {
   constructor(props) {
     super(props);
     this.handleMouseDown = this.handleMouseDown.bind(this);

public/app/core/components/TagFilter/TagValue.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { TagBadge } from './TagBadge';
 
-export interface IProps {
+export interface Props {
   value: any;
   className: any;
   onClick: any;
   onRemove: any;
 }
 
-export class TagValue extends React.Component<IProps, any> {
+export class TagValue extends React.Component<Props, any> {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);

public/app/core/components/Tooltip/Popover.tsx

@@ -2,11 +2,11 @@
 import withTooltip from './withTooltip';
 import { Target } from 'react-popper';
 
-interface IPopoverProps {
+interface PopoverProps {
   tooltipSetState: (prevState: object) => void;
 }
 
-class Popover extends React.Component<IPopoverProps, any> {
+class Popover extends React.Component<PopoverProps, any> {
   constructor(props) {
     super(props);
     this.toggleTooltip = this.toggleTooltip.bind(this);

public/app/core/components/Tooltip/Tooltip.tsx

@@ -2,11 +2,11 @@
 import withTooltip from './withTooltip';
 import { Target } from 'react-popper';
 
-interface ITooltipProps {
+interface TooltipProps {
   tooltipSetState: (prevState: object) => void;
 }
 
-class Tooltip extends React.Component<ITooltipProps, any> {
+class Tooltip extends React.Component<TooltipProps, any> {
   constructor(props) {
     super(props);
     this.showTooltip = this.showTooltip.bind(this);

public/app/core/components/colorpicker/ColorPalette.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { sortedColors } from 'app/core/utils/colors';
 
-export interface IProps {
+export interface Props {
   color: string;
   onColorSelect: (c: string) => void;
 }
 
-export class ColorPalette extends React.Component<IProps, any> {
+export class ColorPalette extends React.Component<Props, any> {
   paletteColors: string[];
 
   constructor(props) {
@@ -29,7 +29,8 @@ export class ColorPalette extends React.Component<IProps, any> {
           key={paletteColor}
           className={'pointer fa ' + cssClass}
           style={{ color: paletteColor }}
-          onClick={this.onColorSelect(paletteColor)}>
+          onClick={this.onColorSelect(paletteColor)}
+        >
           &nbsp;
         </i>
       );
@@ -41,4 +42,3 @@ export class ColorPalette extends React.Component<IProps, any> {
     );
   }
 }
-

public/app/core/components/colorpicker/ColorPicker.tsx

@@ -5,12 +5,12 @@ import Drop from 'tether-drop';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
-export interface IProps {
+export interface Props {
   color: string;
   onChange: (c: string) => void;
 }
 
-export class ColorPicker extends React.Component<IProps, any> {
+export class ColorPicker extends React.Component<Props, any> {
   pickerElem: any;
   colorPickerDrop: any;
 

public/app/core/components/colorpicker/ColorPickerPopover.tsx

@@ -6,12 +6,12 @@ import { SpectrumPicker } from './SpectrumPicker';
 
 const DEFAULT_COLOR = '#000000';
 
-export interface IProps {
+export interface Props {
   color: string;
   onColorSelect: (c: string) => void;
 }
 
-export class ColorPickerPopover extends React.Component<IProps, any> {
+export class ColorPickerPopover extends React.Component<Props, any> {
   pickerNavElem: any;
 
   constructor(props) {
@@ -19,7 +19,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
     this.state = {
       tab: 'palette',
       color: this.props.color || DEFAULT_COLOR,
-      colorString: this.props.color || DEFAULT_COLOR
+      colorString: this.props.color || DEFAULT_COLOR,
     };
   }
 
@@ -32,7 +32,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
     if (newColor.isValid()) {
       this.setState({
         color: newColor.toString(),
-        colorString: newColor.toString()
+        colorString: newColor.toString(),
       });
       this.props.onColorSelect(color);
     }
@@ -50,7 +50,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
   onColorStringChange(e) {
     let colorString = e.target.value;
     this.setState({
-      colorString: colorString
+      colorString: colorString,
     });
 
     let newColor = tinycolor(colorString);
@@ -71,11 +71,11 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
 
   componentDidMount() {
     this.pickerNavElem.find('li:first').addClass('active');
-    this.pickerNavElem.on('show', (e) => {
+    this.pickerNavElem.on('show', e => {
       // use href attr (#name => name)
       let tab = e.target.hash.slice(1);
       this.setState({
-        tab: tab
+        tab: tab,
       });
     });
   }
@@ -97,19 +97,24 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
       <div className="gf-color-picker">
         <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
           <li className="gf-tabs-item-colorpicker">
-            <a href="#palette" data-toggle="tab">Colors</a>
+            <a href="#palette" data-toggle="tab">
+              Colors
+            </a>
           </li>
           <li className="gf-tabs-item-colorpicker">
-            <a href="#spectrum" data-toggle="tab">Custom</a>
+            <a href="#spectrum" data-toggle="tab">
+              Custom
+            </a>
           </li>
         </ul>
-        <div className="gf-color-picker__body">
-          {currentTab}
-        </div>
+        <div className="gf-color-picker__body">{currentTab}</div>
         <div>
-          <input className="gf-form-input gf-form-input--small" value={this.state.colorString}
-            onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
-          </input>
+          <input
+            className="gf-form-input gf-form-input--small"
+            value={this.state.colorString}
+            onChange={this.onColorStringChange.bind(this)}
+            onBlur={this.onColorStringBlur.bind(this)}
+          />
         </div>
       </div>
     );

public/app/core/components/colorpicker/SeriesColorPicker.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
-export interface IProps {
+export interface Props {
   series: any;
   onColorChange: (color: string) => void;
   onToggleAxis: () => void;
 }
 
-export class SeriesColorPicker extends React.Component<IProps, any> {
+export class SeriesColorPicker extends React.Component<Props, any> {
   constructor(props) {
     super(props);
     this.onColorChange = this.onColorChange.bind(this);

public/app/core/components/colorpicker/SpectrumPicker.tsx

@@ -3,13 +3,13 @@ import _ from 'lodash';
 import $ from 'jquery';
 import 'vendor/spectrum';
 
-export interface IProps {
+export interface Props {
   color: string;
   options: object;
   onColorSelect: (c: string) => void;
 }
 
-export class SpectrumPicker extends React.Component<IProps, any> {
+export class SpectrumPicker extends React.Component<Props, any> {
   elem: any;
   isMoving: boolean;
 
@@ -29,14 +29,17 @@ export class SpectrumPicker extends React.Component<IProps, any> {
   }
 
   componentDidMount() {
-    let spectrumOptions = _.assignIn({
-      flat: true,
-      showAlpha: true,
-      showButtons: false,
-      color: this.props.color,
-      appendTo: this.elem,
-      move: this.onSpectrumMove,
-    }, this.props.options);
+    let spectrumOptions = _.assignIn(
+      {
+        flat: true,
+        showAlpha: true,
+        showButtons: false,
+        color: this.props.color,
+        appendTo: this.elem,
+        move: this.onSpectrumMove,
+      },
+      this.props.options
+    );
 
     this.elem.spectrum(spectrumOptions);
     this.elem.spectrum('show');
@@ -64,9 +67,6 @@ export class SpectrumPicker extends React.Component<IProps, any> {
   }
 
   render() {
-    return (
-      <div className="spectrum-container" ref={this.setComponentElem}></div>
-    );
+    return <div className="spectrum-container" ref={this.setComponentElem} />;
   }
 }
-

public/app/stores/AlertListStore/AlertListStore.ts

@@ -1,13 +1,13 @@
 import { types, getEnv, flow } from 'mobx-state-tree';
-import { AlertRule } from './AlertRule';
+import { AlertRule as AlertRuleModel } from './AlertRule';
 import { setStateFields } from './helpers';
 
-type IAlertRuleType = typeof AlertRule.Type;
-export interface IAlertRule extends IAlertRuleType {}
+type AlertRuleType = typeof AlertRuleModel.Type;
+export interface AlertRule extends AlertRuleType {}
 
 export const AlertListStore = types
   .model('AlertListStore', {
-    rules: types.array(AlertRule),
+    rules: types.array(AlertRuleModel),
     stateFilter: types.optional(types.string, 'all'),
     search: types.optional(types.string, ''),
   })
@@ -38,7 +38,7 @@ export const AlertListStore = types
           }
         }
 
-        self.rules.push(AlertRule.create(rule));
+        self.rules.push(AlertRuleModel.create(rule));
       }
     }),
     setSearchQuery(query: string) {

public/app/stores/NavStore/NavStore.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { types, getEnv } from 'mobx-state-tree';
 import { NavItem } from './NavItem';
-import { ITeam } from '../TeamsStore/TeamsStore';
+import { Team } from '../TeamsStore/TeamsStore';
 
 export const NavStore = types
   .model('NavStore', {
@@ -117,7 +117,7 @@ export const NavStore = types
       self.main = NavItem.create(main);
     },
 
-    initTeamPage(team: ITeam, tab: string, isSyncEnabled: boolean) {
+    initTeamPage(team: Team, tab: string, isSyncEnabled: boolean) {
       let main = {
         img: team.avatarUrl,
         id: 'team-' + team.id,

public/app/stores/RootStore/RootStore.ts

@@ -34,5 +34,5 @@ export const RootStore = types.model({
   }),
 });
 
-type IRootStoreType = typeof RootStore.Type;
-export interface IRootStore extends IRootStoreType {}
+type RootStoreType = typeof RootStore.Type;
+export interface RootStoreInterface extends RootStoreType {}

public/app/stores/TeamsStore/TeamsStore.ts

@@ -1,6 +1,6 @@
 import { types, getEnv, flow } from 'mobx-state-tree';
 
-export const TeamMember = types.model('TeamMember', {
+export const TeamMemberModel = types.model('TeamMember', {
   userId: types.identifier(types.number),
   teamId: types.number,
   avatarUrl: types.string,
@@ -8,18 +8,18 @@ export const TeamMember = types.model('TeamMember', {
   login: types.string,
 });
 
-type TeamMemberType = typeof TeamMember.Type;
-export interface ITeamMember extends TeamMemberType {}
+type TeamMemberType = typeof TeamMemberModel.Type;
+export interface TeamMember extends TeamMemberType {}
 
-export const TeamGroup = types.model('TeamGroup', {
+export const TeamGroupModel = types.model('TeamGroup', {
   groupId: types.identifier(types.string),
   teamId: types.number,
 });
 
-type TeamGroupType = typeof TeamGroup.Type;
-export interface ITeamGroup extends TeamGroupType {}
+type TeamGroupType = typeof TeamGroupModel.Type;
+export interface TeamGroup extends TeamGroupType {}
 
-export const Team = types
+export const TeamModel = types
   .model('Team', {
     id: types.identifier(types.number),
     name: types.string,
@@ -27,8 +27,8 @@ export const Team = types
     email: types.string,
     memberCount: types.number,
     search: types.optional(types.string, ''),
-    members: types.optional(types.map(TeamMember), {}),
-    groups: types.optional(types.map(TeamGroup), {}),
+    members: types.optional(types.map(TeamMemberModel), {}),
+    groups: types.optional(types.map(TeamGroupModel), {}),
   })
   .views(self => ({
     get filteredMembers() {
@@ -67,11 +67,11 @@ export const Team = types
       self.members.clear();
 
       for (let member of rsp) {
-        self.members.set(member.userId.toString(), TeamMember.create(member));
+        self.members.set(member.userId.toString(), TeamMemberModel.create(member));
       }
     }),
 
-    removeMember: flow(function* load(member: ITeamMember) {
+    removeMember: flow(function* load(member: TeamMember) {
       const backendSrv = getEnv(self).backendSrv;
       yield backendSrv.delete(`/api/teams/${self.id}/members/${member.userId}`);
       // remove from store map
@@ -89,7 +89,7 @@ export const Team = types
       self.groups.clear();
 
       for (let group of rsp) {
-        self.groups.set(group.groupId, TeamGroup.create(group));
+        self.groups.set(group.groupId, TeamGroupModel.create(group));
       }
     }),
 
@@ -98,7 +98,7 @@ export const Team = types
       yield backendSrv.post(`/api/teams/${self.id}/groups`, { groupId: groupId });
       self.groups.set(
         groupId,
-        TeamGroup.create({
+        TeamGroupModel.create({
           teamId: self.id,
           groupId: groupId,
         })
@@ -112,12 +112,12 @@ export const Team = types
     }),
   }));
 
-type TeamType = typeof Team.Type;
-export interface ITeam extends TeamType {}
+type TeamType = typeof TeamModel.Type;
+export interface Team extends TeamType {}
 
 export const TeamsStore = types
   .model('TeamsStore', {
-    map: types.map(Team),
+    map: types.map(TeamModel),
     search: types.optional(types.string, ''),
   })
   .views(self => ({
@@ -136,7 +136,7 @@ export const TeamsStore = types
       self.map.clear();
 
       for (let team of rsp.teams) {
-        self.map.set(team.id.toString(), Team.create(team));
+        self.map.set(team.id.toString(), TeamModel.create(team));
       }
     }),
 
@@ -151,6 +151,6 @@ export const TeamsStore = types
 
       const backendSrv = getEnv(self).backendSrv;
       const team = yield backendSrv.get(`/api/teams/${id}`);
-      self.map.set(id, Team.create(team));
+      self.map.set(id, TeamModel.create(team));
     }),
   }));

public/app/stores/store.ts

@@ -1,7 +1,7 @@
-import { RootStore, IRootStore } from './RootStore/RootStore';
+import { RootStore, RootStoreInterface } from './RootStore/RootStore';
 import config from 'app/core/config';
 
-export let store: IRootStore;
+export let store: RootStoreInterface;
 
 export function createStore(services) {
   store = RootStore.create(

tslint.json

@@ -1,5 +1,6 @@
 {
   "rules": {
+    "interface-name": [true, "never-prefix"],
     "no-string-throw": true,
     "no-unused-expression": true,
     "no-unused-variable": false,

yarn.lock

@@ -11454,6 +11454,12 @@ tslint-loader@^3.5.3:
     rimraf "^2.4.4"
     semver "^5.3.0"
 
+tslint-react@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-3.6.0.tgz#7f462c95c4a0afaae82507f06517ff02942196a1"
+  dependencies:
+    tsutils "^2.13.1"
+
 tslint@^5.8.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.10.0.tgz#11e26bccb88afa02dd0d9956cae3d4540b5f54c3"
@@ -11477,6 +11483,12 @@ tsutils@^2.12.1:
   dependencies:
     tslib "^1.8.1"
 
+tsutils@^2.13.1:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"
+  dependencies:
+    tslib "^1.8.1"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"