Implement automatic formatting for JS / TSX source code.

Implemented automatic code formatting for JS/TSX using prettier and husky
with pre-commit hook

Signed-off-by: SAGAR PATEL <sagar.a.patel@slscorp.com>

Co-authored-by: Orne Brocaar <info@brocaar.com>

ui/.prettierignore

@@ -0,0 +1,2 @@
+build
+node_modules

ui/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "endOfLine": "auto",
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "jsxBracketSameLine": true
+}

ui/package.json

@@ -44,7 +44,14 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "prettier --check .",
+    "format": "prettier --write . && git add -A ."
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn format"
+    }
   },
   "eslintConfig": {
     "extends": [
@@ -60,5 +67,9 @@
     "not dead",
     "not op_mini all"
   ],
-  "proxy": "http://127.0.0.1:8080/"
+  "proxy": "http://127.0.0.1:8080/",
+  "devDependencies": {
+    "husky": "^7.0.4",
+    "prettier": "^2.6.2"
+  }
 }

ui/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Router, Route, Switch } from "react-router-dom";
 
-import { Layout } from 'antd';
+import { Layout } from "antd";
 
 import { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
 
@@ -35,15 +35,12 @@ import SessionStore from "./stores/SessionStore";
 
 import history from "./history";
 
-
+interface IProps {}
-interface IProps {
-}
 
 interface IState {
   user?: User;
 }
 
-
 class App extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -72,7 +69,8 @@ class App extends Component<IProps, IState> {
           <Switch>
             <Route exact path="/" component={TenantRedirect} />
             <Route exact path="/login" component={Login} />
-              {this.state.user && <Route>
+            {this.state.user && (
+              <Route>
                 <Layout.Header className="layout-header">
                   <Header user={this.state.user} />
                 </Layout.Header>
@@ -80,7 +78,7 @@ class App extends Component<IProps, IState> {
                   <Layout.Sider width="300" theme="light" className="layout-menu">
                     <Menu />
                   </Layout.Sider>
-                  <Layout.Content className="layout-content" style={{ padding: '24px 24px 24px' }}>
+                  <Layout.Content className="layout-content" style={{ padding: "24px 24px 24px" }}>
                     <Switch>
                       <Route exact path="/dashboard" component={Dashboard} />
 
@@ -98,7 +96,8 @@ class App extends Component<IProps, IState> {
                     </Switch>
                   </Layout.Content>
                 </Layout>
-              </Route>}
+              </Route>
+            )}
           </Switch>
         </Router>
       </Layout>

ui/src/components/Admin.tsx

@@ -2,7 +2,6 @@ import { Component } from "react";
 
 import SessionStore from "../stores/SessionStore";
 
-
 interface IProps {
   tenantId?: string;
   isDeviceAdmin?: boolean;
@@ -68,14 +67,14 @@ class Admin extends Component<IProps, IState> {
         });
       }
     }
-  }
+  };
 
   render() {
     if (this.state.admin) {
-      return(this.props.children);
+      return this.props.children;
     }
 
-    return(null);
+    return null;
   }
 }
 

ui/src/components/AesKeyInput.tsx

@@ -4,9 +4,9 @@ import { Input, Select, Button, Space, Form } from "antd";
 import { ReloadOutlined } from "@ant-design/icons";
 
 interface IProps {
-  formRef: React.RefObject<any>,
+  formRef: React.RefObject<any>;
-  label: string,
+  label: string;
-  name: string,
+  name: string;
   required?: boolean;
   value?: string;
   disabled?: boolean;
@@ -18,7 +18,6 @@ interface IState {
   value: string;
 }
 
-
 class AesKeyInput extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -39,7 +38,7 @@ class AesKeyInput extends Component<IProps, IState> {
     this.props.formRef.current.setFieldsValue({
       [this.props.name]: value,
     });
-  }
+  };
 
   componentDidMount() {
     if (this.props.value) {
@@ -62,10 +61,13 @@ class AesKeyInput extends Component<IProps, IState> {
       }
     }
 
-    this.setState({
+    this.setState(
+      {
         value: value,
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   onByteOrderSelect = (v: string) => {
     if (v === this.state.byteOrder) {
@@ -79,21 +81,27 @@ class AesKeyInput extends Component<IProps, IState> {
     const current = this.state.value;
     const bytes = current.match(/[A-Fa-f0-9]{2}/g) || [];
 
-    this.setState({
+    this.setState(
+      {
         value: bytes.reverse().join(""),
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   generateRandom = () => {
     let cryptoObj = window.crypto || window.Crypto;
     let b = new Uint8Array(16);
     cryptoObj.getRandomValues(b);
 
-    let key = Buffer.from(b).toString('hex');
+    let key = Buffer.from(b).toString("hex");
-    this.setState({
+    this.setState(
+      {
         value: key,
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   render() {
     const addon = (
@@ -102,23 +110,34 @@ class AesKeyInput extends Component<IProps, IState> {
           <Select.Option value="msb">MSB</Select.Option>
           <Select.Option value="lsb">LSB</Select.Option>
         </Select>
-        <Button type="text" size="small" shape="circle" onClick={this.generateRandom}><ReloadOutlined /></Button>
+        <Button type="text" size="small" shape="circle" onClick={this.generateRandom}>
+          <ReloadOutlined />
+        </Button>
       </Space>
     );
 
     return (
       <Form.Item
-        rules={[{
+        rules={[
+          {
             required: this.props.required,
             message: `Please enter a valid ${this.props.label}`,
             pattern: new RegExp(/[A-Fa-f0-9]{32}/g),
-        }]}
+          },
+        ]}
         label={this.props.label}
         name={this.props.name}
         tooltip={this.props.tooltip}
       >
         <Input hidden />
-        <Input.Password id={`${this.props.name}Render`} onChange={this.onChange} addonAfter={!this.props.disabled && addon} style={{fontFamily: "monospace"}} value={this.state.value} disabled={this.props.disabled} />
+        <Input.Password
+          id={`${this.props.name}Render`}
+          onChange={this.onChange}
+          addonAfter={!this.props.disabled && addon}
+          style={{ fontFamily: "monospace" }}
+          value={this.state.value}
+          disabled={this.props.disabled}
+        />
       </Form.Item>
     );
   }

ui/src/components/Autocomplete.tsx

@@ -2,24 +2,23 @@ import React, { Component } from "react";
 
 import { Select } from "antd";
 
-export type OptionsCallbackFunc = (o: {label: string, value: string}[]) => void;
+export type OptionsCallbackFunc = (o: { label: string; value: string }[]) => void;
-export type OptionCallbackFunc = (o: {label: string, value: string}) => void;
+export type OptionCallbackFunc = (o: { label: string; value: string }) => void;
 
 interface IProps {
   placeholder: string;
   className: string;
-  value?: string,
+  value?: string;
-  getOption: (s: string, fn: OptionCallbackFunc) => void,
+  getOption: (s: string, fn: OptionCallbackFunc) => void;
-  getOptions: (s: string, fn: OptionsCallbackFunc) => void,
+  getOptions: (s: string, fn: OptionsCallbackFunc) => void;
-  onSelect?: (s: string) => void,
+  onSelect?: (s: string) => void;
 }
 
 interface IState {
-  option?: {label: string, value: string};
+  option?: { label: string; value: string };
-  options: {label: string, value: string}[];
+  options: { label: string; value: string }[];
 }
 
-
 class Autocomplete extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -31,7 +30,7 @@ class Autocomplete extends Component<IProps, IState> {
 
   componentDidMount() {
     if (this.props.value && this.props.value !== "") {
-      this.props.getOption(this.props.value, (o: {label: string, value: string}) => {
+      this.props.getOption(this.props.value, (o: { label: string; value: string }) => {
         this.setState({
           options: [o],
         });
@@ -45,7 +44,7 @@ class Autocomplete extends Component<IProps, IState> {
     }
 
     if (this.props.value && this.props.value !== "") {
-      this.props.getOption(this.props.value, (o: {label: string, value: string}) => {
+      this.props.getOption(this.props.value, (o: { label: string; value: string }) => {
         this.setState({
           options: [o],
         });
@@ -54,7 +53,7 @@ class Autocomplete extends Component<IProps, IState> {
   }
 
   onFocus = () => {
-    this.props.getOptions("", (options) => {
+    this.props.getOptions("", options => {
       if (this.state.option !== undefined) {
         const selected = this.state.option.value;
 
@@ -67,15 +66,15 @@ class Autocomplete extends Component<IProps, IState> {
         options: options,
       });
     });
-  }
+  };
 
   onSearch = (value: string) => {
-    this.props.getOptions(value, (options) => {
+    this.props.getOptions(value, options => {
       this.setState({
         options: options,
       });
     });
-  }
+  };
 
   onSelect = (value: string, option: any) => {
     this.setState({
@@ -85,7 +84,7 @@ class Autocomplete extends Component<IProps, IState> {
     if (this.props.onSelect !== undefined) {
       this.props.onSelect(value);
     }
-  }
+  };
 
   render() {
     const { getOption, getOptions, ...otherProps } = this.props;

ui/src/components/AutocompleteInput.tsx

@@ -4,26 +4,26 @@ import { Form } from "antd";
 
 import Autocomplete, { OptionCallbackFunc, OptionsCallbackFunc } from "./Autocomplete";
 
-
 interface IProps {
-  formRef: React.RefObject<any>,
+  formRef: React.RefObject<any>;
-  label: string,
+  label: string;
-  name: string,
+  name: string;
   required?: boolean;
   value?: string;
-  getOption: (s: string, fn: OptionCallbackFunc) => void,
+  getOption: (s: string, fn: OptionCallbackFunc) => void;
-  getOptions: (s: string, fn: OptionsCallbackFunc) => void,
+  getOptions: (s: string, fn: OptionsCallbackFunc) => void;
 }
 
-
 class AutocompleteInput extends Component<IProps> {
   render() {
     return (
       <Form.Item
-        rules={[{
+        rules={[
+          {
             required: this.props.required,
             message: `Please select a ${this.props.label}`,
-        }]}
+          },
+        ]}
         label={this.props.label}
         name={this.props.name}
       >

ui/src/components/CodeEditor.tsx

@@ -5,11 +5,10 @@ import { Form } from "antd";
 
 import "codemirror/mode/javascript/javascript";
 
-
 interface IProps {
-  formRef: React.RefObject<any>,
+  formRef: React.RefObject<any>;
-  label?: string,
+  label?: string;
-  name: string,
+  name: string;
   required?: boolean;
   value?: string;
   disabled?: boolean;
@@ -20,7 +19,6 @@ interface IState {
   value: string;
 }
 
-
 class CodeEditor extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -43,13 +41,16 @@ class CodeEditor extends Component<IProps, IState> {
     this.props.formRef.current.setFieldsValue({
       [this.props.name]: value,
     });
-  }
+  };
 
   handleChange = (editor: any, data: any, newCode: string) => {
-    this.setState({
+    this.setState(
+      {
         value: newCode,
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   render() {
     const codeMirrorOptions = {
@@ -60,21 +61,13 @@ class CodeEditor extends Component<IProps, IState> {
     };
 
     return (
-      <Form.Item
+      <Form.Item label={this.props.label} name={this.props.name} tooltip={this.props.tooltip}>
-        label={this.props.label}
-        name={this.props.name}
-        tooltip={this.props.tooltip}
-      >
         <div style={{ border: "1px solid #cccccc" }}>
-          <CodeMirror
+          <CodeMirror value={this.state.value} options={codeMirrorOptions} onBeforeChange={this.handleChange} />
-            value={this.state.value}
-            options={codeMirrorOptions}
-            onBeforeChange={this.handleChange}
-          />
         </div>
       </Form.Item>
     );
   }
 }
 
-export default CodeEditor
+export default CodeEditor;

ui/src/components/DataTable.tsx

@@ -5,10 +5,8 @@ import { ColumnsType } from "antd/es/table";
 
 import SessionStore from "../stores/SessionStore";
 
-
 export type GetPageCallbackFunc = (totalCount: number, rows: object[]) => void;
 
-
 interface IProps {
   columns: ColumnsType<any>;
   getPage: (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => void;
@@ -23,10 +21,9 @@ interface IState {
   pageSize: number;
   currentPage: number;
   rows: object[];
-  loading: boolean,
+  loading: boolean;
 }
 
-
 class DataTable extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -53,9 +50,11 @@ class DataTable extends Component<IProps, IState> {
   }
 
   onChangePage = (page: number, pageSize?: number | void) => {
-    this.setState({
+    this.setState(
+      {
         loading: true,
-    }, () => {
+      },
+      () => {
         let pz = pageSize;
         if (!pz) {
           pz = this.state.pageSize;
@@ -70,20 +69,21 @@ class DataTable extends Component<IProps, IState> {
             loading: false,
           });
         });
-    });
+      },
-  }
+    );
+  };
 
   onShowSizeChange = (page: number, pageSize: number) => {
     this.onChangePage(page, pageSize);
     SessionStore.setRowsPerPage(pageSize);
-  }
+  };
 
   onRowsSelectChange = (ids: React.Key[]) => {
     const idss = ids as string[];
     if (this.props.onRowsSelectChange) {
       this.props.onRowsSelectChange(idss);
     }
-  }
+  };
 
   render() {
     const { getPage, refreshKey, ...otherProps } = this.props;
@@ -113,7 +113,6 @@ class DataTable extends Component<IProps, IState> {
       };
     }
 
-
     return (
       <Table
         loading={loadingProps}

ui/src/components/DeleteConfirm.tsx

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 
-import { Popover, Button, Typography, Space, Input } from 'antd';
+import { Popover, Button, Typography, Space, Input } from "antd";
-
 
 interface IProps {
   typ: string;
@@ -9,17 +8,15 @@ interface IProps {
   onConfirm: () => void;
 }
 
-
 interface ConfirmState {
   confirm: string;
 }
 
-
 class DeleteConfirmContent extends Component<IProps, ConfirmState> {
   constructor(props: IProps) {
     super(props);
     this.state = {
-      confirm: '',
+      confirm: "",
     };
   }
 
@@ -27,20 +24,27 @@ class DeleteConfirmContent extends Component<IProps, ConfirmState> {
     this.setState({
       confirm: e.target.value,
     });
-  }
+  };
 
   render() {
     return (
       <Space direction="vertical">
-        <Typography.Text>Enter '{this.props.confirm}' to confirm you want to delete this {this.props.typ}:</Typography.Text>
+        <Typography.Text>
+          Enter '{this.props.confirm}' to confirm you want to delete this {this.props.typ}:
+        </Typography.Text>
         <Input placeholder={this.props.confirm} onChange={this.onChange} />
-        <Button onClick={this.props.onConfirm} disabled={this.state.confirm !== this.props.confirm} style={{float: "right"}}>Delete</Button>
+        <Button
+          onClick={this.props.onConfirm}
+          disabled={this.state.confirm !== this.props.confirm}
+          style={{ float: "right" }}
+        >
+          Delete
+        </Button>
       </Space>
     );
   }
 }
 
-
 class DeleteConfirm extends Component<IProps> {
   render() {
     return (

ui/src/components/DevAddrInput.tsx

@@ -3,21 +3,15 @@ import React, { Component } from "react";
 import { Input, Select, Button, Space, Form } from "antd";
 import { ReloadOutlined } from "@ant-design/icons";
 
-
+import { GetRandomDevAddrRequest, GetRandomDevAddrResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
-import { 
-  GetRandomDevAddrRequest,
-  GetRandomDevAddrResponse,
-} from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
-
 
 import DeviceStore from "../stores/DeviceStore";
 
-
 interface IProps {
-  formRef: React.RefObject<any>,
+  formRef: React.RefObject<any>;
-  label: string,
+  label: string;
-  name: string,
+  name: string;
-  devEui: string,
+  devEui: string;
   required?: boolean;
   value?: string;
   disabled?: boolean;
@@ -28,7 +22,6 @@ interface IState {
   value: string;
 }
 
-
 class DevAddrInput extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -49,7 +42,7 @@ class DevAddrInput extends Component<IProps, IState> {
     this.props.formRef.current.setFieldsValue({
       [this.props.name]: value,
     });
-  }
+  };
 
   componentDidMount() {
     if (this.props.value) {
@@ -72,10 +65,13 @@ class DevAddrInput extends Component<IProps, IState> {
       }
     }
 
-    this.setState({
+    this.setState(
+      {
         value: value,
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   onByteOrderSelect = (v: string) => {
     if (v === this.state.byteOrder) {
@@ -89,21 +85,27 @@ class DevAddrInput extends Component<IProps, IState> {
     const current = this.state.value;
     const bytes = current.match(/[A-Fa-f0-9]{2}/g) || [];
 
-    this.setState({
+    this.setState(
+      {
         value: bytes.reverse().join(""),
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   generateRandom = () => {
     let req = new GetRandomDevAddrRequest();
     req.setDevEui(this.props.devEui);
 
     DeviceStore.getRandomDevAddr(req, (resp: GetRandomDevAddrResponse) => {
-      this.setState({
+      this.setState(
+        {
           value: resp.getDevAddr(),
-      }, this.updateField);
+        },
+        this.updateField,
+      );
     });
-  }
+  };
 
   render() {
     const addon = (
@@ -112,22 +114,33 @@ class DevAddrInput extends Component<IProps, IState> {
           <Select.Option value="msb">MSB</Select.Option>
           <Select.Option value="lsb">LSB</Select.Option>
         </Select>
-        <Button type="text" size="small" shape="circle" onClick={this.generateRandom}><ReloadOutlined /></Button>
+        <Button type="text" size="small" shape="circle" onClick={this.generateRandom}>
+          <ReloadOutlined />
+        </Button>
       </Space>
     );
 
     return (
       <Form.Item
-        rules={[{
+        rules={[
+          {
             required: this.props.required,
             message: `Please enter a valid ${this.props.label}`,
             pattern: new RegExp(/[A-Fa-f0-9]{8}/g),
-        }]}
+          },
+        ]}
         label={this.props.label}
         name={this.props.name}
       >
         <Input hidden />
-        <Input id={`${this.props.name}Render`} onChange={this.onChange} addonAfter={!this.props.disabled && addon} style={{fontFamily: "monospace"}} value={this.state.value} disabled={this.props.disabled} />
+        <Input
+          id={`${this.props.name}Render`}
+          onChange={this.onChange}
+          addonAfter={!this.props.disabled && addon}
+          style={{ fontFamily: "monospace" }}
+          value={this.state.value}
+          disabled={this.props.disabled}
+        />
       </Form.Item>
     );
   }

ui/src/components/EuiInput.tsx

@@ -4,9 +4,9 @@ import { Input, Select, Button, Space, Form } from "antd";
 import { ReloadOutlined } from "@ant-design/icons";
 
 interface IProps {
-  formRef: React.RefObject<any>,
+  formRef: React.RefObject<any>;
-  label: string,
+  label: string;
-  name: string,
+  name: string;
   required?: boolean;
   value?: string;
   disabled?: boolean;
@@ -17,7 +17,6 @@ interface IState {
   value: string;
 }
 
-
 class EuiInput extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -38,7 +37,7 @@ class EuiInput extends Component<IProps, IState> {
     this.props.formRef.current.setFieldsValue({
       [this.props.name]: value,
     });
-  }
+  };
 
   componentDidMount() {
     if (this.props.value) {
@@ -61,10 +60,13 @@ class EuiInput extends Component<IProps, IState> {
       }
     }
 
-    this.setState({
+    this.setState(
+      {
         value: value,
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   onByteOrderSelect = (v: string) => {
     if (v === this.state.byteOrder) {
@@ -78,21 +80,27 @@ class EuiInput extends Component<IProps, IState> {
     const current = this.state.value;
     const bytes = current.match(/[A-Fa-f0-9]{2}/g) || [];
 
-    this.setState({
+    this.setState(
+      {
         value: bytes.reverse().join(""),
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   generateRandom = () => {
     let cryptoObj = window.crypto || window.Crypto;
     let b = new Uint8Array(8);
     cryptoObj.getRandomValues(b);
 
-    let key = Buffer.from(b).toString('hex');
+    let key = Buffer.from(b).toString("hex");
-    this.setState({
+    this.setState(
+      {
         value: key,
-    }, this.updateField);
+      },
-  }
+      this.updateField,
+    );
+  };
 
   render() {
     const addon = (
@@ -101,22 +109,33 @@ class EuiInput extends Component<IProps, IState> {
           <Select.Option value="msb">MSB</Select.Option>
           <Select.Option value="lsb">LSB</Select.Option>
         </Select>
-        <Button type="text" size="small" shape="circle" onClick={this.generateRandom}><ReloadOutlined /></Button>
+        <Button type="text" size="small" shape="circle" onClick={this.generateRandom}>
+          <ReloadOutlined />
+        </Button>
       </Space>
     );
 
     return (
       <Form.Item
-        rules={[{
+        rules={[
+          {
             required: this.props.required,
             message: `Please enter a valid ${this.props.label}`,
             pattern: new RegExp(/[A-Fa-f0-9]{16}/g),
-        }]}
+          },
+        ]}
         label={this.props.label}
         name={this.props.name}
       >
         <Input hidden />
-        <Input id={`${this.props.name}Render`} onChange={this.onChange} addonAfter={!this.props.disabled && addon} style={{fontFamily: "monospace"}} value={this.state.value} disabled={this.props.disabled} />
+        <Input
+          id={`${this.props.name}Render`}
+          onChange={this.onChange}
+          addonAfter={!this.props.disabled && addon}
+          style={{ fontFamily: "monospace" }}
+          value={this.state.value}
+          disabled={this.props.disabled}
+        />
       </Form.Item>
     );
   }

ui/src/components/Header.tsx

@@ -13,27 +13,20 @@ import {
 
 import InternalStore from "../stores/InternalStore";
 
-
 interface IProps {
   user: User;
 }
 
 interface IState {
   searchResult?: GlobalSearchResponse;
-  settings?: SettingsResponse,
+  settings?: SettingsResponse;
 }
 
-const renderTitle = (title: string) => (
+const renderTitle = (title: string) => <span>{title}</span>;
-  <span>
-    {title}
-  </span>
-);
 
 const renderItem = (title: string, url: string) => ({
   value: title,
-  label: (
+  label: <Link to={url}>{title}</Link>,
-    <Link to={url}>{title}</Link>
-  ),
 });
 
 class Header extends Component<IProps, IState> {
@@ -65,7 +58,7 @@ class Header extends Component<IProps, IState> {
         searchResult: resp,
       });
     });
-  }
+  };
 
   render() {
     if (this.state.settings === undefined) {
@@ -76,9 +69,11 @@ class Header extends Component<IProps, IState> {
 
     const menu = (
       <Menu>
-        {!oidcEnabled && <Menu.Item>
+        {!oidcEnabled && (
+          <Menu.Item>
             <Link to={`/users/${this.props.user.getId()}/password`}>Change password</Link>
-        </Menu.Item>}
+          </Menu.Item>
+        )}
         <Menu.Item>
           <Link to="/login">Logout</Link>
         </Menu.Item>
@@ -90,19 +85,19 @@ class Header extends Component<IProps, IState> {
       options: any[];
     }[] = [
       {
-        label: renderTitle('Tenants'),
+        label: renderTitle("Tenants"),
         options: [],
       },
       {
-        label: renderTitle('Gateways'),
+        label: renderTitle("Gateways"),
         options: [],
       },
       {
-        label: renderTitle('Applications'),
+        label: renderTitle("Applications"),
         options: [],
       },
       {
-        label: renderTitle('Devices'),
+        label: renderTitle("Devices"),
         options: [],
       },
     ];
@@ -110,19 +105,31 @@ class Header extends Component<IProps, IState> {
     if (this.state.searchResult !== undefined) {
       for (const res of this.state.searchResult.getResultList()) {
         if (res.getKind() === "tenant") {
-          options[0].options.push(renderItem(res.getTenantName(), `/tenants/${res.getTenantId()}`))
+          options[0].options.push(renderItem(res.getTenantName(), `/tenants/${res.getTenantId()}`));
         }
 
         if (res.getKind() === "gateway") {
-          options[1].options.push(renderItem(res.getGatewayName(), `/tenants/${res.getTenantId()}/gateways/${res.getGatewayId()}`))
+          options[1].options.push(
+            renderItem(res.getGatewayName(), `/tenants/${res.getTenantId()}/gateways/${res.getGatewayId()}`),
+          );
         }
 
         if (res.getKind() === "application") {
-          options[2].options.push(renderItem(res.getApplicationName(), `/tenants/${res.getTenantId()}/applications/${res.getApplicationId()}`))
+          options[2].options.push(
+            renderItem(
+              res.getApplicationName(),
+              `/tenants/${res.getTenantId()}/applications/${res.getApplicationId()}`,
+            ),
+          );
         }
 
         if (res.getKind() === "device") {
-          options[3].options.push(renderItem(res.getDeviceName(), `/tenants/${res.getTenantId()}/applications/${res.getApplicationId()}/devices/${res.getDeviceDevEui()}`));
+          options[3].options.push(
+            renderItem(
+              res.getDeviceName(),
+              `/tenants/${res.getTenantId()}/applications/${res.getApplicationId()}/devices/${res.getDeviceDevEui()}`,
+            ),
+          );
         }
       }
     }
@@ -142,11 +149,15 @@ class Header extends Component<IProps, IState> {
             </AutoComplete>
           </div>
           <div className="help">
-            <a href="https://www.chirpstack.io" target="_blank" rel="noreferrer"><Button icon={<QuestionOutlined />}/></a>
+            <a href="https://www.chirpstack.io" target="_blank" rel="noreferrer">
+              <Button icon={<QuestionOutlined />} />
+            </a>
           </div>
           <div className="user">
-            <Dropdown overlay={menu} placement="bottomRight" trigger={['click']}>
+            <Dropdown overlay={menu} placement="bottomRight" trigger={["click"]}>
-              <Button type="primary" icon={<UserOutlined />}>{this.props.user.getEmail()} <DownOutlined /></Button>
+              <Button type="primary" icon={<UserOutlined />}>
+                {this.props.user.getEmail()} <DownOutlined />
+              </Button>
             </Dropdown>
           </div>
         </div>

ui/src/components/Heatmap.tsx

@@ -3,20 +3,17 @@ import React, { Component } from "react";
 import { color } from "chart.js/helpers";
 import { Chart } from "react-chartjs-2";
 
-
 interface HeatmapData {
   x: string;
   y: Array<[string, number]>;
 }
 
-
 interface IProps {
   data: HeatmapData[];
   fromColor: string;
   toColor: string;
 }
 
-
 class Heatmap extends Component<IProps> {
   render() {
     if (this.props.data.length === 0) {
@@ -45,14 +42,18 @@ class Heatmap extends Component<IProps> {
           fromColor: this.props.fromColor.match(/\d+/g)!.map(Number),
           toColor: this.props.toColor.match(/\d+/g)!.map(Number),
           backgroundColor: (ctx: any): string => {
-            if (ctx.dataset === undefined || ctx.dataset.data === undefined || ctx.dataset.data[ctx.dataIndex] === undefined) {
+            if (
-              return color('white').rgbString();
+              ctx.dataset === undefined ||
+              ctx.dataset.data === undefined ||
+              ctx.dataset.data[ctx.dataIndex] === undefined
+            ) {
+              return color("white").rgbString();
             }
 
             const value = ctx.dataset.data[ctx.dataIndex].v;
             const steps = ctx.dataset.maxValue - ctx.dataset.minValue + 1;
             const step = value - ctx.dataset.minValue;
-            const factor = 1 / steps * step;
+            const factor = (1 / steps) * step;
 
             let result: [number, number, number] = ctx.dataset.fromColor.slice();
             for (var i = 0; i < 3; i++) {
@@ -94,7 +95,6 @@ class Heatmap extends Component<IProps> {
           grid: {
             display: false,
           },
-
         },
       },
       plugins: {
@@ -102,11 +102,11 @@ class Heatmap extends Component<IProps> {
         tooltip: {
           callbacks: {
             title: () => {
-              return '';
+              return "";
             },
             label: (ctx: any) => {
               const v = ctx.dataset.data[ctx.dataIndex].v;
-              return 'Count: ' + v;
+              return "Count: " + v;
             },
           },
         },
@@ -136,9 +136,7 @@ class Heatmap extends Component<IProps> {
       }
     }
 
-    return(
+    return <Chart type="matrix" data={data} options={options} />;
-      <Chart type="matrix" data={data} options={options} />
-    );
   }
 }
 

ui/src/components/LogTable.tsx

@@ -3,11 +3,10 @@ import moment from "moment";
 import JSONTreeOriginal from "react-json-tree";
 
 import { Tag, Drawer, Button, Table, Spin } from "antd";
-import { ZoomInOutlined } from '@ant-design/icons';
+import { ZoomInOutlined } from "@ant-design/icons";
 
 import { LogItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
-
 interface IProps {
   logs: LogItem[];
 }
@@ -15,8 +14,7 @@ interface IProps {
 interface IState {
   drawerOpen: boolean;
   body: any;
-};
+}
-
 
 class LogTable extends Component<IProps, IState> {
   constructor(props: IProps) {
@@ -32,7 +30,7 @@ class LogTable extends Component<IProps, IState> {
     this.setState({
       drawerOpen: false,
     });
-  }
+  };
 
   onDrawerOpen = (body: any) => {
     return () => {
@@ -41,44 +39,56 @@ class LogTable extends Component<IProps, IState> {
         drawerOpen: true,
       });
     };
-  }
+  };
 
   render() {
     let items = this.props.logs.map((l, i) => l.toObject());
     let body = JSON.parse(this.state.body);
 
     const theme = {
-      scheme: 'google',
+      scheme: "google",
-      author: 'seth wright (http://sethawright.com)',
+      author: "seth wright (http://sethawright.com)",
-      base00: '#000000',
+      base00: "#000000",
-      base01: '#282a2e',
+      base01: "#282a2e",
-      base02: '#373b41',
+      base02: "#373b41",
-      base03: '#969896',
+      base03: "#969896",
-      base04: '#b4b7b4',
+      base04: "#b4b7b4",
-      base05: '#c5c8c6',
+      base05: "#c5c8c6",
-      base06: '#e0e0e0',
+      base06: "#e0e0e0",
-      base07: '#ffffff',
+      base07: "#ffffff",
-      base08: '#CC342B',
+      base08: "#CC342B",
-      base09: '#F96A38',
+      base09: "#F96A38",
-      base0A: '#FBA922',
+      base0A: "#FBA922",
-      base0B: '#198844',
+      base0B: "#198844",
-      base0C: '#3971ED',
+      base0C: "#3971ED",
-      base0D: '#3971ED',
+      base0D: "#3971ED",
-      base0E: '#A36AC7',
+      base0E: "#A36AC7",
-      base0F: '#3971ED',
+      base0F: "#3971ED",
     };
 
     return (
       <div>
-        <Drawer title="Details" placement="right" width={650} onClose={this.onDrawerClose} visible={this.state.drawerOpen}>
+        <Drawer
+          title="Details"
+          placement="right"
+          width={650}
+          onClose={this.onDrawerClose}
+          visible={this.state.drawerOpen}
+        >
           <JSONTreeOriginal
             data={body}
             theme={theme}
             hideRoot={true}
-            shouldExpandNode={() => {return true}}
+            shouldExpandNode={() => {
+              return true;
+            }}
           />
         </Drawer>
-        {items.length !== 0 && <div className="spinner"><Spin /></div>}
+        {items.length !== 0 && (
+          <div className="spinner">
+            <Spin />
+          </div>
+        )}
         <Table
           showHeader={false}
           loading={items.length === 0}
@@ -101,15 +111,32 @@ class LogTable extends Component<IProps, IState> {
               dataIndex: "description",
               key: "description",
               width: 200,
-              render: (text, obj) => <Button icon={<ZoomInOutlined />} type="primary" shape="round" size="small" onClick={this.onDrawerOpen(obj.body)}>{text}</Button>,
+              render: (text, obj) => (
+                <Button
+                  icon={<ZoomInOutlined />}
+                  type="primary"
+                  shape="round"
+                  size="small"
+                  onClick={this.onDrawerOpen(obj.body)}
+                >
+                  {text}
+                </Button>
+              ),
             },
             {
               title: "Properties",
               dataIndex: "properties",
               key: "properties",
-              render: (text, obj) => obj.propertiesMap.map((p, i) => {
+              render: (text, obj) =>
+                obj.propertiesMap.map((p, i) => {
                   if (p[1] !== "") {
-                  return <Tag><pre>{p[0]}: {p[1]}</pre></Tag>
+                    return (
+                      <Tag>
+                        <pre>
+                          {p[0]}: {p[1]}
+                        </pre>
+                      </Tag>
+                    );
                   }
 
                   return null;

ui/src/components/Map.tsx

@@ -3,8 +3,7 @@ import React, { Component } from "react";
 import L, { LatLngTuple, FitBoundsOptions } from "leaflet";
 import "leaflet.awesome-markers";
 import { MarkerProps as LMarkerProps } from "react-leaflet";
-import { MapContainer, Marker as LMarker, TileLayer } from 'react-leaflet';
+import { MapContainer, Marker as LMarker, TileLayer } from "react-leaflet";
-
 
 interface IProps {
   height: number;
@@ -17,7 +16,6 @@ interface IState {
   map?: L.Map;
 }
 
-
 class Map extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -25,9 +23,11 @@ class Map extends Component<IProps, IState> {
   }
 
   setMap = (map: L.Map) => {
-    this.setState({
+    this.setState(
+      {
         map: map,
-    }, () => {
+      },
+      () => {
         // This is needed as setMap is called after the map has been created.
         // There is a small amount of time where componentDidUpdate can't update
         // the map with the new center because setMap hasn't been called yet.
@@ -39,8 +39,9 @@ class Map extends Component<IProps, IState> {
         if (this.props.bounds !== undefined) {
           map.fitBounds(this.props.bounds, this.props.boundsOptions);
         }
-    });
+      },
-  }
+    );
+  };
 
   componentDidUpdate(oldProps: IProps) {
     if (this.props === oldProps) {
@@ -84,7 +85,17 @@ class Map extends Component<IProps, IState> {
   }
 }
 
-export type MarkerColor  = "red" | "darkred" | "orange" | "green" | "darkgreen" | "blue" | "purple" | "darkpurple" | "cadetblue" | undefined;
+export type MarkerColor =
+  | "red"
+  | "darkred"
+  | "orange"
+  | "green"
+  | "darkgreen"
+  | "blue"
+  | "purple"
+  | "darkpurple"
+  | "cadetblue"
+  | undefined;
 
 interface MarkerProps extends LMarkerProps {
   position: [number, number];
@@ -102,9 +113,10 @@ export class Marker extends Component<MarkerProps> {
       markerColor: color,
     });
 
-
     return (
-      <LMarker icon={iconMarker} position={position} {...otherProps}>{this.props.children}</LMarker>
+      <LMarker icon={iconMarker} position={position} {...otherProps}>
+        {this.props.children}
+      </LMarker>
     );
   }
 }

ui/src/components/Menu.tsx

@@ -2,9 +2,22 @@ import React, { Component } from "react";
 import { withRouter, RouteComponentProps, Link } from "react-router-dom";
 
 import { Menu, MenuProps } from "antd";
-import { CloudOutlined, HomeOutlined, UserOutlined, DashboardOutlined, KeyOutlined, WifiOutlined, ControlOutlined, AppstoreOutlined } from "@ant-design/icons";
+import {
+  CloudOutlined,
+  HomeOutlined,
+  UserOutlined,
+  DashboardOutlined,
+  KeyOutlined,
+  WifiOutlined,
+  ControlOutlined,
+  AppstoreOutlined,
+} from "@ant-design/icons";
 
-import { GetTenantResponse, ListTenantsRequest, ListTenantsResponse } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
+import {
+  GetTenantResponse,
+  ListTenantsRequest,
+  ListTenantsResponse,
+} from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
 import Autocomplete, { OptionCallbackFunc, OptionsCallbackFunc } from "../components/Autocomplete";
 import TenantStore from "../stores/TenantStore";
@@ -48,7 +61,7 @@ class SideMenu extends Component<RouteComponentProps, IState> {
     this.setState({
       tenantId: SessionStore.getTenantId(),
     });
-  }
+  };
 
   getTenantOptions = (search: string, fn: OptionsCallbackFunc) => {
     let req = new ListTenantsRequest();
@@ -56,10 +69,12 @@ class SideMenu extends Component<RouteComponentProps, IState> {
     req.setLimit(10);
 
     TenantStore.list(req, (resp: ListTenantsResponse) => {
-      const options = resp.getResultList().map((o, i) => {return {label: o.getName(), value: o.getId()}});
+      const options = resp.getResultList().map((o, i) => {
+        return { label: o.getName(), value: o.getId() };
+      });
       fn(options);
     });
-  } 
+  };
 
   getTenantOption = (id: string, fn: OptionCallbackFunc) => {
     TenantStore.get(id, (resp: GetTenantResponse) => {
@@ -68,19 +83,19 @@ class SideMenu extends Component<RouteComponentProps, IState> {
         fn({ label: tenant.getName(), value: tenant.getId() });
       }
     });
-  }
+  };
 
   onTenantSelect = (value: string) => {
     SessionStore.setTenantId(value);
     this.props.history.push(`/tenants/${value}`);
-  }
+  };
 
   parseLocation = () => {
     const path = this.props.history.location.pathname;
     const tenantRe = /\/tenants\/([\w-]{36})/g;
     const match = tenantRe.exec(path);
 
-    if (match !== null && (this.state.tenantId !== match[1])) {
+    if (match !== null && this.state.tenantId !== match[1]) {
       SessionStore.setTenantId(match[1]);
     }
 
@@ -104,7 +119,6 @@ class SideMenu extends Component<RouteComponentProps, IState> {
       this.setState({ selectedKey: "ns-api-keys" });
     }
 
-
     // tenant dashboard
     if (/\/tenants\/[\w-]{36}/g.exec(path)) {
       this.setState({ selectedKey: "tenant-dashboard" });
@@ -134,7 +148,7 @@ class SideMenu extends Component<RouteComponentProps, IState> {
     if (/\/tenants\/[\w-]{36}\/applications.*/g.exec(path)) {
       this.setState({ selectedKey: "tenant-applications" });
     }
-  }
+  };
 
   render() {
     const tenantId = this.state.tenantId;

ui/src/history.ts

@@ -1,2 +1,2 @@
-import { createHashHistory } from 'history';
+import { createHashHistory } from "history";
 export default createHashHistory();

ui/src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 
 // import { Chart, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, Title } from "chart.js";
 import { Chart, registerables } from "chart.js";
-import { MatrixElement, MatrixController } from 'chartjs-chart-matrix';
+import { MatrixElement, MatrixController } from "chartjs-chart-matrix";
 import "chartjs-adapter-moment";
 
 import App from "./App";
@@ -23,7 +23,7 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById("root"),
 );
 
 // If you want to start measuring performance in your app, pass a function

ui/src/reportWebVitals.ts

@@ -1,8 +1,8 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);

ui/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

ui/src/stores/ApplicationStore.ts

@@ -64,7 +64,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class ApplicationStore extends EventEmitter {
   client: ApplicationServiceClient;
 
@@ -87,7 +86,7 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   get = (req: GetApplicationRequest, callbackFunc: (resp: GetApplicationResponse) => void) => {
     this.client.get(req, SessionStore.getMetadata(), (err, resp) => {
@@ -98,10 +97,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   update = (req: UpdateApplicationRequest, callbackFunc: () => void) => {
-    this.client.update(req, SessionStore.getMetadata(), (err) => {
+    this.client.update(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -114,10 +113,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   delete = (req: DeleteApplicationRequest, callbackFunc: () => void) => {
-    this.client.delete(req, SessionStore.getMetadata(), (err) => {
+    this.client.delete(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -130,7 +129,7 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   list = (req: ListApplicationsRequest, callbackFunc: (resp: ListApplicationsResponse) => void) => {
     this.client.list(req, SessionStore.getMetadata(), (err, resp) => {
@@ -141,7 +140,7 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   listIntegrations = (req: ListIntegrationsRequest, callbackFunc: (resp: ListIntegrationsResponse) => void) => {
     this.client.listIntegrations(req, SessionStore.getMetadata(), (err, resp) => {
@@ -151,11 +150,11 @@ class ApplicationStore extends EventEmitter {
       }
 
       callbackFunc(resp);
-    })
+    });
-  }
+  };
 
   createHttpIntegration = (req: CreateHttpIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createHttpIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createHttpIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -168,7 +167,7 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   getHttpIntegration = (req: GetHttpIntegrationRequest, callbackFunc: (resp: GetHttpIntegrationResponse) => void) => {
     this.client.getHttpIntegration(req, SessionStore.getMetadata(), (err, resp) => {
@@ -179,10 +178,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateHttpIntegration = (req: UpdateHttpIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateHttpIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateHttpIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -195,10 +194,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteHttpIntegration = (req: DeleteHttpIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteHttpIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteHttpIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -212,10 +211,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createAwsSnsIntegration = (req: CreateAwsSnsIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createAwsSnsIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createAwsSnsIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -228,9 +227,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getAwsSnsIntegration = (req: GetAwsSnsIntegrationRequest, callbackFunc: (resp: GetAwsSnsIntegrationResponse) => void) => {
+  getAwsSnsIntegration = (
+    req: GetAwsSnsIntegrationRequest,
+    callbackFunc: (resp: GetAwsSnsIntegrationResponse) => void,
+  ) => {
     this.client.getAwsSnsIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -239,10 +241,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateAwsSnsIntegration = (req: UpdateAwsSnsIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateAwsSnsIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateAwsSnsIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -255,10 +257,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteAwsSnsIntegration = (req: DeleteAwsSnsIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteAwsSnsIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteAwsSnsIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -272,10 +274,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createAzureServiceBusIntegration = (req: CreateAzureServiceBusIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createAzureServiceBusIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createAzureServiceBusIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -288,9 +290,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getAzureServiceBusIntegration = (req: GetAzureServiceBusIntegrationRequest, callbackFunc: (resp: GetAzureServiceBusIntegrationResponse) => void) => {
+  getAzureServiceBusIntegration = (
+    req: GetAzureServiceBusIntegrationRequest,
+    callbackFunc: (resp: GetAzureServiceBusIntegrationResponse) => void,
+  ) => {
     this.client.getAzureServiceBusIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -299,10 +304,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateAzureServiceBusIntegration = (req: UpdateAzureServiceBusIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateAzureServiceBusIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateAzureServiceBusIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -315,10 +320,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteAzureServiceBusIntegration = (req: DeleteAzureServiceBusIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteAzureServiceBusIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteAzureServiceBusIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -332,10 +337,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createGcpPubSubIntegration = (req: CreateGcpPubSubIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createGcpPubSubIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createGcpPubSubIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -348,9 +353,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getGcpPubSubIntegration = (req: GetGcpPubSubIntegrationRequest, callbackFunc: (resp: GetGcpPubSubIntegrationResponse) => void) => {
+  getGcpPubSubIntegration = (
+    req: GetGcpPubSubIntegrationRequest,
+    callbackFunc: (resp: GetGcpPubSubIntegrationResponse) => void,
+  ) => {
     this.client.getGcpPubSubIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -359,10 +367,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateGcpPubSubIntegration = (req: UpdateGcpPubSubIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateGcpPubSubIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateGcpPubSubIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -375,10 +383,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteGcpPubSubIntegration = (req: DeleteGcpPubSubIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteGcpPubSubIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteGcpPubSubIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -392,10 +400,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createInfluxDbIntegration = (req: CreateInfluxDbIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createInfluxDbIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createInfluxDbIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -408,9 +416,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getInfluxDbIntegration = (req: GetInfluxDbIntegrationRequest, callbackFunc: (resp: GetInfluxDbIntegrationResponse) => void) => {
+  getInfluxDbIntegration = (
+    req: GetInfluxDbIntegrationRequest,
+    callbackFunc: (resp: GetInfluxDbIntegrationResponse) => void,
+  ) => {
     this.client.getInfluxDbIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -419,10 +430,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateInfluxDbIntegration = (req: UpdateInfluxDbIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateInfluxDbIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateInfluxDbIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -435,10 +446,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteInfluxDbIntegration = (req: DeleteInfluxDbIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteInfluxDbIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteInfluxDbIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -452,10 +463,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createMyDevicesIntegration = (req: CreateMyDevicesIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createMyDevicesIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createMyDevicesIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -468,9 +479,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getMyDevicesIntegration = (req: GetMyDevicesIntegrationRequest, callbackFunc: (resp: GetMyDevicesIntegrationResponse) => void) => {
+  getMyDevicesIntegration = (
+    req: GetMyDevicesIntegrationRequest,
+    callbackFunc: (resp: GetMyDevicesIntegrationResponse) => void,
+  ) => {
     this.client.getMyDevicesIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -479,10 +493,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateMyDevicesIntegration = (req: UpdateMyDevicesIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateMyDevicesIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateMyDevicesIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -495,10 +509,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteMyDevicesIntegration = (req: DeleteMyDevicesIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteMyDevicesIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteMyDevicesIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -512,10 +526,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createPilotThingsIntegration = (req: CreatePilotThingsIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createPilotThingsIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createPilotThingsIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -528,9 +542,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getPilotThingsIntegration = (req: GetPilotThingsIntegrationRequest, callbackFunc: (resp: GetPilotThingsIntegrationResponse) => void) => {
+  getPilotThingsIntegration = (
+    req: GetPilotThingsIntegrationRequest,
+    callbackFunc: (resp: GetPilotThingsIntegrationResponse) => void,
+  ) => {
     this.client.getPilotThingsIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -539,10 +556,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updatePilotThingsIntegration = (req: UpdatePilotThingsIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updatePilotThingsIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updatePilotThingsIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -555,10 +572,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deletePilotThingsIntegration = (req: DeletePilotThingsIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deletePilotThingsIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deletePilotThingsIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -572,10 +589,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createLoraCloudIntegration = (req: CreateLoraCloudIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createLoraCloudIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createLoraCloudIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -588,9 +605,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getLoraCloudIntegration = (req: GetLoraCloudIntegrationRequest, callbackFunc: (resp: GetLoraCloudIntegrationResponse) => void) => {
+  getLoraCloudIntegration = (
+    req: GetLoraCloudIntegrationRequest,
+    callbackFunc: (resp: GetLoraCloudIntegrationResponse) => void,
+  ) => {
     this.client.getLoraCloudIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -599,10 +619,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateLoraCloudIntegration = (req: UpdateLoraCloudIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateLoraCloudIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateLoraCloudIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -615,10 +635,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteLoraCloudIntegration = (req: DeleteLoraCloudIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteLoraCloudIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteLoraCloudIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -632,10 +652,10 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
   createThingsBoardIntegration = (req: CreateThingsBoardIntegrationRequest, callbackFunc: () => void) => {
-    this.client.createThingsBoardIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.createThingsBoardIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -648,9 +668,12 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
-  getThingsBoardIntegration = (req: GetThingsBoardIntegrationRequest, callbackFunc: (resp: GetThingsBoardIntegrationResponse) => void) => {
+  getThingsBoardIntegration = (
+    req: GetThingsBoardIntegrationRequest,
+    callbackFunc: (resp: GetThingsBoardIntegrationResponse) => void,
+  ) => {
     this.client.getThingsBoardIntegration(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -659,10 +682,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateThingsBoardIntegration = (req: UpdateThingsBoardIntegrationRequest, callbackFunc: () => void) => {
-    this.client.updateThingsBoardIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateThingsBoardIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -675,10 +698,10 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteThingsBoardIntegration = (req: DeleteThingsBoardIntegrationRequest, callbackFunc: () => void) => {
-    this.client.deleteThingsBoardIntegration(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteThingsBoardIntegration(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -692,9 +715,12 @@ class ApplicationStore extends EventEmitter {
       this.emit("integration.delete");
       callbackFunc();
     });
-  }
+  };
 
-  generateMqttIntegrationClientCertificate = (req: GenerateMqttIntegrationClientCertificateRequest, callbackFunc: (resp: GenerateMqttIntegrationClientCertificateResponse) => void) => {
+  generateMqttIntegrationClientCertificate = (
+    req: GenerateMqttIntegrationClientCertificateRequest,
+    callbackFunc: (resp: GenerateMqttIntegrationClientCertificateResponse) => void,
+  ) => {
     this.client.generateMqttIntegrationClientCertificate(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -703,7 +729,7 @@ class ApplicationStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 }
 
 const applicationStore = new ApplicationStore();

ui/src/stores/DeviceProfileStore.ts

@@ -17,7 +17,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class DeviceProfileStore extends EventEmitter {
   client: DeviceProfileServiceClient;
 
@@ -40,7 +39,7 @@ class DeviceProfileStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   get = (req: GetDeviceProfileRequest, callbackFunc: (resp: GetDeviceProfileResponse) => void) => {
     this.client.get(req, SessionStore.getMetadata(), (err, resp) => {
@@ -51,10 +50,10 @@ class DeviceProfileStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   update = (req: UpdateDeviceProfileRequest, callbackFunc: () => void) => {
-    this.client.update(req, SessionStore.getMetadata(), (err) => {
+    this.client.update(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -67,10 +66,10 @@ class DeviceProfileStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   delete = (req: DeleteDeviceProfileRequest, callbackFunc: () => void) => {
-    this.client.delete(req, SessionStore.getMetadata(), (err) => {
+    this.client.delete(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -83,7 +82,7 @@ class DeviceProfileStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   list = (req: ListDeviceProfilesRequest, callbackFunc: (resp: ListDeviceProfilesResponse) => void) => {
     this.client.list(req, SessionStore.getMetadata(), (err, resp) => {
@@ -93,8 +92,8 @@ class DeviceProfileStore extends EventEmitter {
       }
 
       callbackFunc(resp);
-    })
+    });
-  }
+  };
 
   listAdrAlgorithms = (callbackFunc: (resp: ListDeviceProfileAdrAlgorithmsResponse) => void) => {
     this.client.listAdrAlgorithms(new google_protobuf_empty_pb.Empty(), SessionStore.getMetadata(), (err, resp) => {
@@ -105,7 +104,7 @@ class DeviceProfileStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 }
 
 const deviceProfileStore = new DeviceProfileStore();

ui/src/stores/DeviceStore.ts

@@ -33,7 +33,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class DeviceStore extends EventEmitter {
   client: DeviceServiceClient;
 
@@ -43,7 +42,7 @@ class DeviceStore extends EventEmitter {
   }
 
   create = (req: CreateDeviceRequest, callbackFunc: () => void) => {
-    this.client.create(req, SessionStore.getMetadata(), (err) => {
+    this.client.create(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -56,7 +55,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   get = (req: GetDeviceRequest, callbackFunc: (resp: GetDeviceResponse) => void) => {
     this.client.get(req, SessionStore.getMetadata(), (err, resp) => {
@@ -67,10 +66,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   update = (req: UpdateDeviceRequest, callbackFunc: () => void) => {
-    this.client.update(req, SessionStore.getMetadata(), (err) => {
+    this.client.update(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -83,10 +82,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   delete = (req: DeleteDeviceRequest, callbackFunc: () => void) => {
-    this.client.delete(req, SessionStore.getMetadata(), (err) => {
+    this.client.delete(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -99,7 +98,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   list = (req: ListDevicesRequest, callbackFunc: (resp: ListDevicesResponse) => void) => {
     this.client.list(req, SessionStore.getMetadata(), (err, resp) => {
@@ -110,10 +109,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   createKeys = (req: CreateDeviceKeysRequest, callbackFunc: () => void) => {
-    this.client.createKeys(req, SessionStore.getMetadata(), (err) => {
+    this.client.createKeys(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -126,7 +125,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   getKeys = (req: GetDeviceKeysRequest, callbackFunc: (resp?: GetDeviceKeysResponse) => void) => {
     this.client.getKeys(req, SessionStore.getMetadata(), (err, resp) => {
@@ -139,10 +138,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateKeys = (req: UpdateDeviceKeysRequest, callbackFunc: () => void) => {
-    this.client.updateKeys(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateKeys(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -155,10 +154,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteKeys = (req: DeleteDeviceKeysRequest, callbackFunc: () => void) => {
-    this.client.deleteKeys(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteKeys(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -171,7 +170,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   getStats = (req: GetDeviceStatsRequest, callbackFunc: (resp: GetDeviceStatsResponse) => void) => {
     this.client.getStats(req, SessionStore.getMetadata(), (err, resp) => {
@@ -182,7 +181,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   enqueue = (req: EnqueueDeviceQueueItemRequest, callbackFunc: (resp: EnqueueDeviceQueueItemResponse) => void) => {
     this.client.enqueue(req, SessionStore.getMetadata(), (err, resp) => {
@@ -193,10 +192,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   flushQueue = (req: FlushDeviceQueueRequest, callbackFunc: () => void) => {
-    this.client.flushQueue(req, SessionStore.getMetadata(), (err) => {
+    this.client.flushQueue(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -204,10 +203,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   flushDevNonces = (req: FlushDevNoncesRequest, callbackFunc: () => void) => {
-    this.client.flushDevNonces(req, SessionStore.getMetadata(), (err) => {
+    this.client.flushDevNonces(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -220,7 +219,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   getQueue = (req: GetDeviceQueueItemsRequest, callbackFunc: (resp: GetDeviceQueueItemsResponse) => void) => {
     this.client.getQueue(req, SessionStore.getMetadata(), (err, resp) => {
@@ -231,10 +230,10 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   activate = (req: ActivateDeviceRequest, callbackFunc: () => void) => {
-    this.client.activate(req, SessionStore.getMetadata(), (err) => {
+    this.client.activate(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -247,7 +246,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   getActivation = (req: GetDeviceActivationRequest, callbackFunc: (resp: GetDeviceActivationResponse) => void) => {
     this.client.getActivation(req, SessionStore.getMetadata(), (err, resp) => {
@@ -258,7 +257,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   getRandomDevAddr = (req: GetRandomDevAddrRequest, callbackFunc: (resp: GetRandomDevAddrResponse) => void) => {
     this.client.getRandomDevAddr(req, SessionStore.getMetadata(), (err, resp) => {
@@ -269,7 +268,7 @@ class DeviceStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 }
 
 const deviceStore = new DeviceStore();

ui/src/stores/GatewayStore.ts

@@ -18,7 +18,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class GatewayStore extends EventEmitter {
   client: GatewayServiceClient;
 
@@ -28,7 +27,7 @@ class GatewayStore extends EventEmitter {
   }
 
   create = (req: CreateGatewayRequest, callbackFunc: () => void) => {
-    this.client.create(req, SessionStore.getMetadata(), (err) => {
+    this.client.create(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -41,7 +40,7 @@ class GatewayStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   get = (req: GetGatewayRequest, callbackFunc: (resp: GetGatewayResponse) => void) => {
     this.client.get(req, SessionStore.getMetadata(), (err, resp) => {
@@ -52,10 +51,10 @@ class GatewayStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   update = (req: UpdateGatewayRequest, callbackFunc: () => void) => {
-    this.client.update(req, SessionStore.getMetadata(), (err) => {
+    this.client.update(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -68,10 +67,10 @@ class GatewayStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   delete = (req: DeleteGatewayRequest, callbackFunc: () => void) => {
-    this.client.delete(req, SessionStore.getMetadata(), (err) => {
+    this.client.delete(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -84,7 +83,7 @@ class GatewayStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   list = (req: ListGatewaysRequest, callbackFunc: (resp: ListGatewaysResponse) => void) => {
     this.client.list(req, SessionStore.getMetadata(), (err, resp) => {
@@ -95,7 +94,7 @@ class GatewayStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   getStats = (req: GetGatewayStatsRequest, callbackFunc: (resp: GetGatewayStatsResponse) => void) => {
     this.client.getStats(req, SessionStore.getMetadata(), (err, resp) => {
@@ -106,9 +105,12 @@ class GatewayStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
-  generateClientCertificate = (req: GenerateGatewayClientCertificateRequest, callbackFunc: (resp: GenerateGatewayClientCertificateResponse) => void) => {
+  generateClientCertificate = (
+    req: GenerateGatewayClientCertificateRequest,
+    callbackFunc: (resp: GenerateGatewayClientCertificateResponse) => void,
+  ) => {
     this.client.generateClientCertificate(req, SessionStore.getMetadata(), (err, resp) => {
       if (err !== null) {
         HandleError(err);
@@ -117,7 +119,7 @@ class GatewayStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 }
 
 const gatewayStore = new GatewayStore();

ui/src/stores/InternalStore.ts

@@ -1,4 +1,4 @@
-import * as grpcWeb from 'grpc-web';
+import * as grpcWeb from "grpc-web";
 import google_protobuf_empty_pb from "google-protobuf/google/protobuf/empty_pb";
 
 import { notification } from "antd";
@@ -26,7 +26,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class InternalStore extends EventEmitter {
   client: InternalServiceClient;
 
@@ -49,7 +48,7 @@ class InternalStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   deleteApiKey = (req: DeleteApiKeyRequest, callbackFunc: () => void) => {
     this.client.deleteApiKey(req, SessionStore.getMetadata(), (err, resp) => {
@@ -65,7 +64,7 @@ class InternalStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   listApiKeys = (req: ListApiKeysRequest, callbackFunc: (resp: ListApiKeysResponse) => void) => {
     this.client.listApiKeys(req, SessionStore.getMetadata(), (err, resp) => {
@@ -76,26 +75,25 @@ class InternalStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
-  streamGatewayFrames = (req: StreamGatewayFramesRequest, callbackFunc: (resp: LogItem) => void): () => void => {
+  streamGatewayFrames = (req: StreamGatewayFramesRequest, callbackFunc: (resp: LogItem) => void): (() => void) => {
     var stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined;
 
     let setup = () => {
       console.log("Setting up gRPC stream");
       stream = this.client.streamGatewayFrames(req, SessionStore.getMetadata());
 
-      stream = stream.on("data", (resp) => {
+      stream = stream.on("data", resp => {
         callbackFunc(resp);
       });
 
-      stream = stream.on('end', function() {
+      stream = stream.on("end", function () {
         console.log("gRPC stream end, reconnecting");
         setTimeout(setup, 1000);
       });
     };
 
-
     setup();
 
     return () => {
@@ -103,26 +101,25 @@ class InternalStore extends EventEmitter {
         stream.cancel();
       }
     };
-  }
+  };
 
-  streamDeviceFrames = (req: StreamDeviceFramesRequest, callbackFunc: (resp: LogItem) => void): () => void => {
+  streamDeviceFrames = (req: StreamDeviceFramesRequest, callbackFunc: (resp: LogItem) => void): (() => void) => {
     var stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined;
 
     let setup = () => {
       console.log("Setting up gRPC stream");
       stream = this.client.streamDeviceFrames(req, SessionStore.getMetadata());
 
-      stream = stream.on("data", (resp) => {
+      stream = stream.on("data", resp => {
         callbackFunc(resp);
       });
 
-      stream = stream.on('end', function() {
+      stream = stream.on("end", function () {
         console.log("gRPC stream end, reconnecting");
         setTimeout(setup, 1000);
       });
     };
 
-
     setup();
 
     return () => {
@@ -130,20 +127,20 @@ class InternalStore extends EventEmitter {
         stream.cancel();
       }
     };
-  }
+  };
 
-  streamDeviceEvents = (req: StreamDeviceEventsRequest, callbackFunc: (resp: LogItem) => void): () => void => {
+  streamDeviceEvents = (req: StreamDeviceEventsRequest, callbackFunc: (resp: LogItem) => void): (() => void) => {
     var stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined;
 
     let setup = () => {
       console.log("Setting up gRPC stream");
       stream = this.client.streamDeviceEvents(req, SessionStore.getMetadata());
 
-      stream = stream.on("data", (resp) => {
+      stream = stream.on("data", resp => {
         callbackFunc(resp);
       });
 
-      stream = stream.on('end', function() {
+      stream = stream.on("end", function () {
         console.log("gRPC stream end, reconnecting");
         setTimeout(setup, 1000);
       });
@@ -156,7 +153,7 @@ class InternalStore extends EventEmitter {
         stream.cancel();
       }
     };
-  }
+  };
 
   getGatewaysSummary = (req: GetGatewaysSummaryRequest, callbackFunc: (resp: GetGatewaysSummaryResponse) => void) => {
     this.client.getGatewaysSummary(req, SessionStore.getMetadata(), (err, resp) => {
@@ -167,7 +164,7 @@ class InternalStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   getDevicesSummary = (req: GetDevicesSummaryRequest, callbackFunc: (resp: GetDevicesSummaryResponse) => void) => {
     this.client.getDevicesSummary(req, SessionStore.getMetadata(), (err, resp) => {
@@ -178,7 +175,7 @@ class InternalStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   settings = (callbackFunc: (resp: SettingsResponse) => void) => {
     this.client.settings(new google_protobuf_empty_pb.Empty(), {}, (err, resp) => {
@@ -189,7 +186,7 @@ class InternalStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  } 
+  };
 
   globalSearch = (req: GlobalSearchRequest, callbackFunc: (resp: GlobalSearchResponse) => void) => {
     this.client.globalSearch(req, SessionStore.getMetadata(), (err, resp) => {
@@ -200,7 +197,7 @@ class InternalStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 }
 
 const internalStore = new InternalStore();

ui/src/stores/LocationStore.ts

@@ -11,17 +11,21 @@ class LocationStore extends EventEmitter {
       return;
     }
 
-    navigator.geolocation.getCurrentPosition((p: GeolocationPosition) => {
+    navigator.geolocation.getCurrentPosition(
+      (p: GeolocationPosition) => {
         callbackFunc([p.coords.latitude, p.coords.longitude]);
-    }, (e: GeolocationPositionError) => {
+      },
+      (e: GeolocationPositionError) => {
         notification.error({
           message: e.message,
           duration: 3,
         });
-    }, {
+      },
+      {
         timeout: 3000,
-    });
+      },
-  }
+    );
+  };
 }
 
 const locationStore = new LocationStore();

ui/src/stores/MulticastGroupStore.ts

@@ -20,7 +20,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class MulticastGroupStore extends EventEmitter {
   client: MulticastGroupServiceClient;
 
@@ -43,7 +42,7 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   get = (req: GetMulticastGroupRequest, callbackFunc: (resp: GetMulticastGroupResponse) => void) => {
     this.client.get(req, SessionStore.getMetadata(), (err, resp) => {
@@ -54,10 +53,10 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   update = (req: UpdateMulticastGroupRequest, callbackFunc: () => void) => {
-    this.client.update(req, SessionStore.getMetadata(), (err) => {
+    this.client.update(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -70,10 +69,10 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   delete = (req: DeleteMulticastGroupRequest, callbackFunc: () => void) => {
-    this.client.delete(req, SessionStore.getMetadata(), (err) => {
+    this.client.delete(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -86,7 +85,7 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   list = (req: ListMulticastGroupsRequest, callbackFunc: (resp: ListMulticastGroupsResponse) => void) => {
     this.client.list(req, SessionStore.getMetadata(), (err, resp) => {
@@ -97,10 +96,10 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   addDevice = (req: AddDeviceToMulticastGroupRequest, callbackFunc: () => void) => {
-    this.client.addDevice(req, SessionStore.getMetadata(), (err) => {
+    this.client.addDevice(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -113,10 +112,10 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   removeDevice = (req: RemoveDeviceFromMulticastGroupRequest, callbackFunc: () => void) => {
-    this.client.removeDevice(req, SessionStore.getMetadata(), (err) => {
+    this.client.removeDevice(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -124,7 +123,7 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   listQueue = (req: ListMulticastGroupQueueRequest, callbackFunc: (resp: ListMulticastGroupQueueResponse) => void) => {
     this.client.listQueue(req, SessionStore.getMetadata(), (err, resp) => {
@@ -135,7 +134,7 @@ class MulticastGroupStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 }
 
 const multicastGroupStore = new MulticastGroupStore();

ui/src/stores/SessionStore.ts

@@ -3,7 +3,11 @@ import { Metadata } from "grpc-web";
 
 import { EventEmitter } from "events";
 import { InternalServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/internal_grpc_web_pb";
-import { LoginRequest, UserTenantLink, OpenIdConnectLoginRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
+import {
+  LoginRequest,
+  UserTenantLink,
+  OpenIdConnectLoginRequest,
+} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 import { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
 
 import { HandleError, HandleLoginError } from "./helpers";
@@ -35,7 +39,7 @@ class SessionStore extends EventEmitter {
       this.setToken(resp.getJwt());
       this.fetchProfile(callbackFunc);
     });
-  }
+  };
 
   openIdConnectLogin = (req: OpenIdConnectLoginRequest, callbackFunc: any) => {
     this.client.openIdConnectLogin(req, {}, (err, resp) => {
@@ -47,7 +51,7 @@ class SessionStore extends EventEmitter {
       this.setToken(resp.getToken());
       this.fetchProfile(callbackFunc);
     });
-  }
+  };
 
   logout = (emit: boolean, callbackFunc: () => void) => {
     localStorage.clear();
@@ -59,11 +63,11 @@ class SessionStore extends EventEmitter {
     }
 
     callbackFunc();
-  }
+  };
 
   setToken = (s: string) => {
     localStorage.setItem("token", s);
-  }
+  };
 
   getToken = (): string => {
     let token = localStorage.getItem("token");
@@ -71,25 +75,25 @@ class SessionStore extends EventEmitter {
       return "";
     }
     return token;
-  }
+  };
 
   getTenantId = (): string => {
     return localStorage.getItem("tenantId") || "";
-  }
+  };
 
   setTenantId = (id: string) => {
     console.log("tenantId set to", id);
     localStorage.setItem("tenantId", id);
     this.emit("tenant.change");
-  }
+  };
 
   getRowsPerPage = (): number => {
     return parseInt(localStorage.getItem("rowsPerPage") || "10", 10);
-  }
+  };
 
   setRowsPerPage = (count: number) => {
     localStorage.setItem("rowsPerPage", count.toString());
-  }
+  };
 
   getMetadata = (): Metadata => {
     if (this.getToken() === "") {
@@ -99,7 +103,7 @@ class SessionStore extends EventEmitter {
     return {
       authorization: "Bearer " + this.getToken(),
     };
-  }
+  };
 
   fetchProfile = (callbackFunc: any) => {
     if (this.getToken() === "") {
@@ -118,11 +122,11 @@ class SessionStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   getUser = (): User | undefined => {
     return this.user;
-  }
+  };
 
   isAdmin = (): boolean => {
     if (!this.user) {
@@ -130,7 +134,7 @@ class SessionStore extends EventEmitter {
     }
 
     return this.user.getIsAdmin();
-  }
+  };
 
   isTenantAdmin = (tenantId: string): boolean => {
     for (const t of this.tenants) {
@@ -140,7 +144,7 @@ class SessionStore extends EventEmitter {
     }
 
     return false;
-  }
+  };
 
   isTenantDeviceAdmin = (tenantId: string): boolean => {
     for (const t of this.tenants) {
@@ -150,7 +154,7 @@ class SessionStore extends EventEmitter {
     }
 
     return false;
-  }
+  };
 
   isTenantGatewayAdmin = (tenantId: string): boolean => {
     for (const t of this.tenants) {
@@ -158,7 +162,7 @@ class SessionStore extends EventEmitter {
     }
 
     return false;
-  }
+  };
 }
 
 const sessionStore = new SessionStore();

ui/src/stores/TenantStore.ts

@@ -22,7 +22,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class TenantStore extends EventEmitter {
   client: TenantServiceClient;
 
@@ -45,7 +44,7 @@ class TenantStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   get = (id: string, callbackFunc: (resp: GetTenantResponse) => void) => {
     let req = new GetTenantRequest();
@@ -59,7 +58,7 @@ class TenantStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   update = (req: UpdateTenantRequest, callbackFunc: () => void) => {
     this.client.update(req, SessionStore.getMetadata(), (err, resp) => {
@@ -77,7 +76,7 @@ class TenantStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   delete = (req: DeleteTenantRequest, callbackFunc: () => void) => {
     this.client.delete(req, SessionStore.getMetadata(), (err, resp) => {
@@ -93,7 +92,7 @@ class TenantStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   list = (req: ListTenantsRequest, callbackFunc: (resp: ListTenantsResponse) => void) => {
     this.client.list(req, SessionStore.getMetadata(), (err, resp) => {
@@ -104,10 +103,10 @@ class TenantStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   addUser = (req: AddTenantUserRequest, callbackFunc: () => void) => {
-    this.client.addUser(req, SessionStore.getMetadata(), (err) => {
+    this.client.addUser(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -131,10 +130,10 @@ class TenantStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updateUser = (req: UpdateTenantUserRequest, callbackFunc: () => void) => {
-    this.client.updateUser(req, SessionStore.getMetadata(), (err) => {
+    this.client.updateUser(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -147,10 +146,10 @@ class TenantStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   deleteUser = (req: DeleteTenantUserRequest, callbackFunc: () => void) => {
-    this.client.deleteUser(req, SessionStore.getMetadata(), (err) => {
+    this.client.deleteUser(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -163,7 +162,7 @@ class TenantStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   listUsers = (req: ListTenantUsersRequest, callbackFunc: (resp: ListTenantUsersResponse) => void) => {
     this.client.listUsers(req, SessionStore.getMetadata(), (err, resp) => {
@@ -174,7 +173,7 @@ class TenantStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 }
 
 const tenantStore = new TenantStore();

ui/src/stores/UserStore.ts

@@ -16,7 +16,6 @@ import {
 import SessionStore from "./SessionStore";
 import { HandleError } from "./helpers";
 
-
 class UserStore extends EventEmitter {
   client: UserServiceClient;
 
@@ -39,7 +38,7 @@ class UserStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   get = (req: GetUserRequest, callbackFunc: (resp: GetUserResponse) => void) => {
     this.client.get(req, SessionStore.getMetadata(), (err, resp) => {
@@ -50,7 +49,7 @@ class UserStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   update = (req: UpdateUserRequest, callbackFunc: () => void) => {
     this.client.update(req, SessionStore.getMetadata(), (err, resp) => {
@@ -66,7 +65,7 @@ class UserStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   delete = (req: DeleteUserRequest, callbackFunc: () => void) => {
     this.client.delete(req, SessionStore.getMetadata(), (err, resp) => {
@@ -82,7 +81,7 @@ class UserStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 
   list = (req: ListUsersRequest, callbackFunc: (resp: ListUsersResponse) => void) => {
     this.client.list(req, SessionStore.getMetadata(), (err, resp) => {
@@ -93,10 +92,10 @@ class UserStore extends EventEmitter {
 
       callbackFunc(resp);
     });
-  }
+  };
 
   updatePassword = (req: UpdateUserPasswordRequest, callbackFunc: () => void) => {
-    this.client.updatePassword(req, SessionStore.getMetadata(), (err) => {
+    this.client.updatePassword(req, SessionStore.getMetadata(), err => {
       if (err !== null) {
         HandleError(err);
         return;
@@ -109,7 +108,7 @@ class UserStore extends EventEmitter {
 
       callbackFunc();
     });
-  }
+  };
 }
 
 const userStore = new UserStore();

ui/src/views/api-keys/ApiKeyForm.tsx

@@ -4,7 +4,6 @@ import { Form, Input, Button } from "antd";
 
 import { ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
-
 interface IProps {
   initialValues: ApiKey;
   onFinish: (obj: ApiKey) => void;
@@ -17,20 +16,18 @@ class ApiKeyForm extends Component<IProps, IState> {
     let apiKey = new ApiKey();
     apiKey.setName(values.name);
     this.props.onFinish(apiKey);
-  }
+  };
 
   render() {
     return (
       <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish}>
-        <Form.Item
+        <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
-          label="Name"
-          name="name"
-          rules={[{required: true, message: "Please enter a name!"}]}
-        >
           <Input />
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/api-keys/ApiKeyToken.tsx

@@ -1,31 +1,28 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Input, Typography, Button, Space } from 'antd';
+import { Input, Typography, Button, Space } from "antd";
 
 import { CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
-
 interface IProps {
   createApiKeyResponse: CreateApiKeyResponse;
 }
 
-
 class ApiKeyToken extends Component<IProps> {
-  
-
   render() {
     return (
       <Space direction="vertical" style={{ width: "100%" }}>
         <Typography>
           <Typography.Paragraph>
-            Use the following API token when making API requests. This token can
+            Use the following API token when making API requests. This token can be revoked at any time by deleting it.
-            be revoked at any time by deleting it. Please note that this token can
+            Please note that this token can only be retrieved once:
-            only be retrieved once:
           </Typography.Paragraph>
         </Typography>
         <Input.TextArea rows={4} value={this.props.createApiKeyResponse.getToken()} />
-          <Button type="primary"><Link to="../api-keys">Back</Link></Button>
+        <Button type="primary">
+          <Link to="../api-keys">Back</Link>
+        </Button>
       </Space>
     );
   }

ui/src/views/api-keys/CreateAdminApiKey.tsx

@@ -9,14 +9,12 @@ import ApiKeyForm from "./ApiKeyForm";
 import ApiKeyToken from "./ApiKeyToken";
 import InternalStore from "../../stores/InternalStore";
 
-
 interface IProps {}
 
 interface IState {
   createApiKeyResponse?: CreateApiKeyResponse;
 }
 
-
 class CreateAdminApiKey extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -34,7 +32,7 @@ class CreateAdminApiKey extends Component<IProps, IState> {
         createApiKeyResponse: resp,
       });
     });
-  }
+  };
 
   render() {
     const apiKey = new ApiKey();
@@ -43,17 +41,21 @@ class CreateAdminApiKey extends Component<IProps, IState> {
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
           title="Add API key"
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Network-server</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to="/api-keys">API keys</Link></span>
+                <span>
+                  <Link to="/api-keys">API keys</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Add</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
         />
         <Card>
           {!this.state.createApiKeyResponse && <ApiKeyForm initialValues={apiKey} onFinish={this.onFinish} />}

ui/src/views/api-keys/CreateTenantApiKey.tsx

@@ -10,7 +10,6 @@ import ApiKeyForm from "./ApiKeyForm";
 import ApiKeyToken from "./ApiKeyToken";
 import InternalStore from "../../stores/InternalStore";
 
-
 interface IState {
   createApiKeyResponse?: CreateApiKeyResponse;
 }
@@ -19,7 +18,6 @@ interface IProps {
   tenant: Tenant;
 }
 
-
 class CreateTenantApiKey extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -37,7 +35,7 @@ class CreateTenantApiKey extends Component<IProps, IState> {
         createApiKeyResponse: resp,
       });
     });
-  }
+  };
 
   render() {
     const apiKey = new ApiKey();
@@ -45,20 +43,26 @@ class CreateTenantApiKey extends Component<IProps, IState> {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/api-keys`}>API Keys</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/api-keys`}>API Keys</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Add</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="Add API key"
         />
         <Card>

ui/src/views/api-keys/ListAdminApiKeys.tsx

@@ -6,20 +6,23 @@ import { DeleteOutlined } from "@ant-design/icons";
 import { Space, Breadcrumb, Button, PageHeader } from "antd";
 import { ColumnsType } from "antd/es/table";
 
-import { ListApiKeysRequest, ListApiKeysResponse, DeleteApiKeyRequest, ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
+import {
+  ListApiKeysRequest,
+  ListApiKeysResponse,
+  DeleteApiKeyRequest,
+  ApiKey,
+} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
 import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
 import InternalStore from "../../stores/InternalStore";
 import DeleteConfirm from "../../components/DeleteConfirm";
 
-
 interface IProps {}
 
 interface IState {
   refreshKey: number;
 }
 
-
 class ListAdminApiKeys extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -47,19 +50,15 @@ class ListAdminApiKeys extends Component<IProps, IState> {
         key: "action",
         width: 100,
         render: (text, record) => (
-          <DeleteConfirm
+          <DeleteConfirm typ="API key" confirm={record.name} onConfirm={this.deleteApiKey(record.id)}>
-            typ="API key"
-            confirm={record.name}
-            onConfirm={this.deleteApiKey(record.id)}
-          >
             <Button shape="circle" icon={<DeleteOutlined />} />
           </DeleteConfirm>
         ),
       },
     ];
-  }
+  };
 
-  deleteApiKey = (id: string): () => void => {
+  deleteApiKey = (id: string): (() => void) => {
     return () => {
       let req = new DeleteApiKeyRequest();
       req.setId(id);
@@ -70,8 +69,8 @@ class ListAdminApiKeys extends Component<IProps, IState> {
           refreshKey: this.state.refreshKey + 1,
         });
       });
-    }
+    };
-  }
+  };
 
   getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
     let req = new ListApiKeysRequest();
@@ -83,31 +82,30 @@ class ListAdminApiKeys extends Component<IProps, IState> {
       const obj = resp.toObject();
       callbackFunc(obj.totalCount, obj.resultList);
     });
-  }
+  };
 
   render() {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Network-server</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>API keys</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="API keys"
           extra={[
-            <Button type="primary"><Link to="/api-keys/create">Add API key</Link></Button>
+            <Button type="primary">
+              <Link to="/api-keys/create">Add API key</Link>
+            </Button>,
           ]}
         />
-        <DataTable
+        <DataTable columns={this.columns()} getPage={this.getPage} rowKey="id" refreshKey={this.state.refreshKey} />
-          columns={this.columns()}
-          getPage={this.getPage}
-          rowKey="id"
-          refreshKey={this.state.refreshKey}
-        />
       </Space>
     );
   }

ui/src/views/api-keys/ListTenantApiKeys.tsx

@@ -5,7 +5,12 @@ import { DeleteOutlined } from "@ant-design/icons";
 import { Space, Breadcrumb, Button, PageHeader } from "antd";
 import { ColumnsType } from "antd/es/table";
 
-import { ListApiKeysRequest, ListApiKeysResponse, DeleteApiKeyRequest, ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
+import {
+  ListApiKeysRequest,
+  ListApiKeysResponse,
+  DeleteApiKeyRequest,
+  ApiKey,
+} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
 import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
@@ -13,7 +18,6 @@ import InternalStore from "../../stores/InternalStore";
 import DeleteConfirm from "../../components/DeleteConfirm";
 import Admin from "../../components/Admin";
 
-
 interface IProps {
   tenant: Tenant;
   isAdmin: boolean;
@@ -23,13 +27,12 @@ interface IState {
   refreshKey: number;
 }
 
-
 class ListTenantApiKeys extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
     this.state = {
       refreshKey: 1,
-    }
+    };
   }
 
   columns = (): ColumnsType<ApiKey.AsObject> => {
@@ -52,20 +55,16 @@ class ListTenantApiKeys extends Component<IProps, IState> {
         width: 100,
         render: (text, record) => (
           <Admin tenantId={this.props.tenant.getId()} isTenantAdmin>
-            <DeleteConfirm
+            <DeleteConfirm typ="API key" confirm={record.name} onConfirm={this.deleteApiKey(record.id)}>
-              typ="API key"
-              confirm={record.name}
-              onConfirm={this.deleteApiKey(record.id)}
-            >
               <Button shape="circle" icon={<DeleteOutlined />} />
             </DeleteConfirm>
           </Admin>
         ),
       },
     ];
-  }
+  };
 
-  deleteApiKey = (id: string): () => void => {
+  deleteApiKey = (id: string): (() => void) => {
     return () => {
       let req = new DeleteApiKeyRequest();
       req.setId(id);
@@ -76,8 +75,8 @@ class ListTenantApiKeys extends Component<IProps, IState> {
           refreshKey: this.state.refreshKey + 1,
         });
       });
-    }
+    };
-  }
+  };
 
   getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
     let req = new ListApiKeysRequest();
@@ -89,36 +88,37 @@ class ListTenantApiKeys extends Component<IProps, IState> {
       const obj = resp.toObject();
       callbackFunc(obj.totalCount, obj.resultList);
     });
-  }
+  };
 
   render() {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>API Keys</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="API keys"
           extra={[
             <Admin tenantId={this.props.tenant.getId()} isTenantAdmin>
-              <Button type="primary"><Link to={`/tenants/${this.props.tenant.getId()}/api-keys/create`}>Add API key</Link></Button>
+              <Button type="primary">
-            </Admin>
+                <Link to={`/tenants/${this.props.tenant.getId()}/api-keys/create`}>Add API key</Link>
+              </Button>
+            </Admin>,
           ]}
         />
-        <DataTable
+        <DataTable columns={this.columns()} getPage={this.getPage} rowKey="id" refreshKey={this.state.refreshKey} />
-          columns={this.columns()}
-          getPage={this.getPage}
-          rowKey="id"
-          refreshKey={this.state.refreshKey}
-        />
       </Space>
     );
   }

ui/src/views/applications/ApplicationForm.tsx

@@ -3,7 +3,6 @@ import React, { Component } from "react";
 import { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 import { Form, Input, Button } from "antd";
 
-
 interface IProps {
   initialValues: Application;
   onFinish: (obj: Application) => void;
@@ -21,26 +20,21 @@ class ApplicationForm extends Component<IProps> {
     app.setDescription(v.description);
 
     this.props.onFinish(app);
-  }
+  };
 
   render() {
     return (
       <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish}>
-        <Form.Item
+        <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
-          label="Name"
-          name="name"
-          rules={[{required: true, message: "Please enter a name!"}]}
-        >
           <Input disabled={this.props.disabled} />
         </Form.Item>
-        <Form.Item
+        <Form.Item label="Description" name="description">
-          label="Description"
-          name="description"
-        >
           <Input.TextArea disabled={this.props.disabled} />
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit" disabled={this.props.disabled}>Submit</Button>
+          <Button type="primary" htmlType="submit" disabled={this.props.disabled}>
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/ApplicationLayout.tsx

@@ -35,13 +35,11 @@ import CreateThingsBoardIntegration from "./integrations/CreateThingsBoardIntegr
 import EditThingsBoardIntegration from "./integrations/EditThingsBoardIntegration";
 import GenerateMqttCertificate from "./integrations/GenerateMqttCertificate";
 
-
 interface IProps extends RouteComponentProps {
   tenant: Tenant;
   application: Application;
 }
 
-
 class ApplicationLayout extends Component<IProps> {
   deleteApplication = () => {
     let req = new DeleteApplicationRequest();
@@ -50,7 +48,7 @@ class ApplicationLayout extends Component<IProps> {
     ApplicationStore.delete(req, () => {
       this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications`);
     });
-  }
+  };
 
   render() {
     const tenant = this.props.tenant;
@@ -73,71 +71,178 @@ class ApplicationLayout extends Component<IProps> {
       tab = "integrations";
     }
 
-    const showIntegrations = SessionStore.isAdmin() || SessionStore.isTenantAdmin(tenant.getId()) || SessionStore.isTenantDeviceAdmin(tenant.getId());
+    const showIntegrations =
+      SessionStore.isAdmin() ||
+      SessionStore.isTenantAdmin(tenant.getId()) ||
+      SessionStore.isTenantDeviceAdmin(tenant.getId());
 
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>{app.getName()}</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title={app.getName()}
           subTitle={`application id: ${app.getId()}`}
           extra={[
             <Admin tenantId={this.props.tenant.getId()} isDeviceAdmin>
-              <DeleteConfirm
+              <DeleteConfirm confirm={app.getName()} typ="application" onConfirm={this.deleteApplication}>
-                confirm={app.getName()}
+                <Button danger type="primary">
-                typ="application"
+                  Delete application
-                onConfirm={this.deleteApplication}
+                </Button>
-              >
-                <Button danger type="primary">Delete application</Button>
               </DeleteConfirm>
-            </Admin>
+            </Admin>,
           ]}
         />
         <Card>
           <Menu mode="horizontal" selectedKeys={[tab]} style={{ marginBottom: 24 }}>
-              <Menu.Item key="devices"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}`}>Devices</Link></Menu.Item>
+            <Menu.Item key="devices">
-              <Menu.Item key="mg"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/multicast-groups`}>Multicast groups</Link></Menu.Item>
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}`}>Devices</Link>
-              <Menu.Item key="edit"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/edit`}>Application configuration</Link></Menu.Item>
+            </Menu.Item>
-              {showIntegrations && <Menu.Item key="integrations"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/integrations`}>Integrations</Link></Menu.Item> }
+            <Menu.Item key="mg">
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/multicast-groups`}>
+                Multicast groups
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="edit">
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/edit`}>Application configuration</Link>
+            </Menu.Item>
+            {showIntegrations && (
+              <Menu.Item key="integrations">
+                <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/integrations`}>Integrations</Link>
+              </Menu.Item>
+            )}
           </Menu>
           <Switch>
             <Route exact path={this.props.match.path} render={props => <ListDevices application={app} {...props} />} />
-              <Route exact path={`${this.props.match.path}/edit`} render={props => <EditApplication application={app} {...props} />} />
+            <Route
-              <Route exact path={`${this.props.match.path}/integrations`} render={props => <ListIntegrations application={app} {...props} />} />
+              exact
-              <Route exact path={`${this.props.match.path}/multicast-groups`} render={props => <ListMulticastGroups application={app} {...props} />} />
+              path={`${this.props.match.path}/edit`}
+              render={props => <EditApplication application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations`}
+              render={props => <ListIntegrations application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/multicast-groups`}
+              render={props => <ListMulticastGroups application={app} {...props} />}
+            />
 
-              <Route exact path={`${this.props.match.path}/integrations/http/create`} render={props => <CreateHttpIntegration application={app} {...props} />} />
+            <Route
-              <Route exact path={`${this.props.match.path}/integrations/http/edit`} render={props => <EditHttpIntegration application={app} {...props} />} />
+              exact
-              <Route exact path={`${this.props.match.path}/integrations/aws-sns/create`} render={props => <CreateAwsSnsIntegration application={app} {...props} />} />
+              path={`${this.props.match.path}/integrations/http/create`}
-              <Route exact path={`${this.props.match.path}/integrations/aws-sns/edit`} render={props => <EditAwsSnsIntegration application={app} {...props} />} />
+              render={props => <CreateHttpIntegration application={app} {...props} />}
-              <Route exact path={`${this.props.match.path}/integrations/azure-service-bus/create`} render={props => <CreateAzureServiceBusIntegration application={app} {...props} />} />
+            />
-              <Route exact path={`${this.props.match.path}/integrations/azure-service-bus/edit`} render={props => <EditAzureServiceBusIntegration application={app} {...props} />} />
+            <Route
-              <Route exact path={`${this.props.match.path}/integrations/gcp-pub-sub/create`} render={props => <CreateGcpPubSubIntegration application={app} {...props} />} />
+              exact
-              <Route exact path={`${this.props.match.path}/integrations/gcp-pub-sub/edit`} render={props => <EditGcpPubSubIntegration application={app} {...props} />} />
+              path={`${this.props.match.path}/integrations/http/edit`}
-              <Route exact path={`${this.props.match.path}/integrations/influxdb/create`} render={props => <CreateInfluxDbIntegration application={app} {...props} />} />
+              render={props => <EditHttpIntegration application={app} {...props} />}
-              <Route exact path={`${this.props.match.path}/integrations/influxdb/edit`} render={props => <EditInfluxDbIntegration application={app} {...props} />} />
+            />
-              <Route exact path={`${this.props.match.path}/integrations/mydevices/create`} render={props => <CreateMyDevicesIntegration application={app} {...props} />} />
+            <Route
-              <Route exact path={`${this.props.match.path}/integrations/mydevices/edit`} render={props => <EditMyDevicesIntegration application={app} {...props} />} />
+              exact
-              <Route exact path={`${this.props.match.path}/integrations/pilot-things/create`} render={props => <CreatePilotThingsIntegration application={app} {...props} />} />
+              path={`${this.props.match.path}/integrations/aws-sns/create`}
-              <Route exact path={`${this.props.match.path}/integrations/pilot-things/edit`} render={props => <EditPilotThingsIntegration application={app} {...props} />} />
+              render={props => <CreateAwsSnsIntegration application={app} {...props} />}
-              <Route exact path={`${this.props.match.path}/integrations/loracloud/create`} render={props => <CreateLoRaCloudIntegration application={app} {...props} />} />
+            />
-              <Route exact path={`${this.props.match.path}/integrations/loracloud/edit`} render={props => <EditLoRaCloudIntegration application={app} {...props} />} />
+            <Route
-              <Route exact path={`${this.props.match.path}/integrations/thingsboard/create`} render={props => <CreateThingsBoardIntegration application={app} {...props} />} />
+              exact
-              <Route exact path={`${this.props.match.path}/integrations/thingsboard/edit`} render={props => <EditThingsBoardIntegration application={app} {...props} />} />
+              path={`${this.props.match.path}/integrations/aws-sns/edit`}
-              <Route exact path={`${this.props.match.path}/integrations/mqtt/certificate`} render={props => <GenerateMqttCertificate application={app} {...props} />} />
+              render={props => <EditAwsSnsIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/azure-service-bus/create`}
+              render={props => <CreateAzureServiceBusIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/azure-service-bus/edit`}
+              render={props => <EditAzureServiceBusIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/gcp-pub-sub/create`}
+              render={props => <CreateGcpPubSubIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/gcp-pub-sub/edit`}
+              render={props => <EditGcpPubSubIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/influxdb/create`}
+              render={props => <CreateInfluxDbIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/influxdb/edit`}
+              render={props => <EditInfluxDbIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/mydevices/create`}
+              render={props => <CreateMyDevicesIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/mydevices/edit`}
+              render={props => <EditMyDevicesIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/pilot-things/create`}
+              render={props => <CreatePilotThingsIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/pilot-things/edit`}
+              render={props => <EditPilotThingsIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/loracloud/create`}
+              render={props => <CreateLoRaCloudIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/loracloud/edit`}
+              render={props => <EditLoRaCloudIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/thingsboard/create`}
+              render={props => <CreateThingsBoardIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/thingsboard/edit`}
+              render={props => <EditThingsBoardIntegration application={app} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/integrations/mqtt/certificate`}
+              render={props => <GenerateMqttCertificate application={app} {...props} />}
+            />
           </Switch>
         </Card>
       </Space>

ui/src/views/applications/ApplicationLoader.tsx

@@ -2,7 +2,11 @@ import React, { Component } from "react";
 import { Route, Switch, RouteComponentProps } from "react-router-dom";
 
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
-import { Application, GetApplicationRequest, GetApplicationResponse } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
+import {
+  Application,
+  GetApplicationRequest,
+  GetApplicationResponse,
+} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../stores/ApplicationStore";
 import ApplicationLayout from "./ApplicationLayout";
@@ -11,7 +15,6 @@ import DeviceLayout from "../devices/DeviceLayout";
 import MulticastGroupLayout from "../multicast-groups/MulticastGroupLayout";
 import CreateMulticastGroup from "../multicast-groups/CreateMulticastGroup";
 
-
 interface MatchParams {
   applicationId: string;
 }
@@ -24,7 +27,6 @@ interface IState {
   application?: Application;
 }
 
-
 class ApplicationLoader extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -44,7 +46,7 @@ class ApplicationLoader extends Component<IProps, IState> {
         application: resp.getApplication(),
       });
     });
-  }
+  };
 
   render() {
     const app = this.state.application;
@@ -55,13 +57,26 @@ class ApplicationLoader extends Component<IProps, IState> {
     const path = this.props.match.path;
     const tenant = this.props.tenant;
 
-
     return (
       <Switch>
-        <Route exact path={`${path}/devices/create`} render={props => <CreateDevice tenant={tenant} application={app} {...props} />} />
+        <Route
-        <Route exact path={`${path}/multicast-groups/create`} render={props => <CreateMulticastGroup tenant={tenant} application={app} {...props} />} />
+          exact
-        <Route path={`${path}/multicast-groups/:multicastGroupId([\\w-]{36})`} render={(props: any) => <MulticastGroupLayout tenant={tenant} application={app} {...props} />} />
+          path={`${path}/devices/create`}
-        <Route path={`${path}/devices/:devEui([0-9a-f]{16})`} component={(props: any) => <DeviceLayout tenant={tenant} application={app} {...props} />} />
+          render={props => <CreateDevice tenant={tenant} application={app} {...props} />}
+        />
+        <Route
+          exact
+          path={`${path}/multicast-groups/create`}
+          render={props => <CreateMulticastGroup tenant={tenant} application={app} {...props} />}
+        />
+        <Route
+          path={`${path}/multicast-groups/:multicastGroupId([\\w-]{36})`}
+          render={(props: any) => <MulticastGroupLayout tenant={tenant} application={app} {...props} />}
+        />
+        <Route
+          path={`${path}/devices/:devEui([0-9a-f]{16})`}
+          component={(props: any) => <DeviceLayout tenant={tenant} application={app} {...props} />}
+        />
         <Route path={path} render={props => <ApplicationLayout tenant={tenant} application={app} {...props} />} />
       </Switch>
     );

ui/src/views/applications/CreateApplication.tsx

@@ -4,17 +4,19 @@ import { Link, RouteComponentProps } from "react-router-dom";
 import { Space, Breadcrumb, Card, PageHeader } from "antd";
 
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
-import { Application, CreateApplicationRequest, CreateApplicationResponse } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
+import {
+  Application,
+  CreateApplicationRequest,
+  CreateApplicationResponse,
+} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationForm from "./ApplicationForm";
 import ApplicationStore from "../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   tenant: Tenant;
 }
 
-
 class CreateApplication extends Component<IProps> {
   onFinish = (obj: Application) => {
     obj.setTenantId(this.props.tenant.getId());
@@ -25,7 +27,7 @@ class CreateApplication extends Component<IProps> {
     ApplicationStore.create(req, (resp: CreateApplicationResponse) => {
       this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${resp.getId()}`);
     });
-  }
+  };
 
   render() {
     const app = new Application();
@@ -33,20 +35,26 @@ class CreateApplication extends Component<IProps> {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Add</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="Add application"
         />
         <Card>

ui/src/views/applications/EditApplication.tsx

@@ -7,28 +7,30 @@ import ApplicationStore from "../../stores/ApplicationStore";
 import ApplicationForm from "./ApplicationForm";
 import SessionStore from "../../stores/SessionStore";
 
-
 interface IProps extends RouteComponentProps {
-  application: Application,
+  application: Application;
 }
 
-
 class EditApplication extends Component<IProps> {
   onFinish = (obj: Application) => {
     let req = new UpdateApplicationRequest();
     req.setApplication(obj);
 
     ApplicationStore.update(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}`,
+      );
     });
-  }
+  };
 
   render() {
-    const disabled = !(SessionStore.isAdmin() || SessionStore.isTenantAdmin(this.props.application.getTenantId()) || SessionStore.isTenantDeviceAdmin(this.props.application.getTenantId()));
+    const disabled = !(
-
+      SessionStore.isAdmin() ||
-    return(
+      SessionStore.isTenantAdmin(this.props.application.getTenantId()) ||
-      <ApplicationForm initialValues={this.props.application} disabled={disabled} onFinish={this.onFinish} />
+      SessionStore.isTenantDeviceAdmin(this.props.application.getTenantId())
     );
+
+    return <ApplicationForm initialValues={this.props.application} disabled={disabled} onFinish={this.onFinish} />;
   }
 }
 

ui/src/views/applications/ListApplications.tsx

@@ -4,19 +4,21 @@ import { Link } from "react-router-dom";
 import { Space, Breadcrumb, Button, PageHeader } from "antd";
 import { ColumnsType } from "antd/es/table";
 
-import { ListApplicationsRequest, ListApplicationsResponse, ApplicationListItem } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
+import {
+  ListApplicationsRequest,
+  ListApplicationsResponse,
+  ApplicationListItem,
+} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
 import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
 import ApplicationStore from "../../stores/ApplicationStore";
 import Admin from "../../components/Admin";
 
-
 interface IProps {
   tenant: Tenant;
 }
 
-
 class ListApplications extends Component<IProps> {
   columns = (): ColumnsType<ApplicationListItem.AsObject> => {
     return [
@@ -35,7 +37,7 @@ class ListApplications extends Component<IProps> {
         key: "description",
       },
     ];
-  }
+  };
 
   getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
     let req = new ListApplicationsRequest();
@@ -47,35 +49,37 @@ class ListApplications extends Component<IProps> {
       const obj = resp.toObject();
       callbackFunc(obj.totalCount, obj.resultList);
     });
-  }
+  };
 
   render() {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Applications</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="Applications"
           extra={[
             <Admin tenantId={this.props.tenant.getId()} isDeviceAdmin>
-              <Button type="primary"><Link to={`/tenants/${this.props.tenant.getId()}/applications/create`}>Add application</Link></Button>
+              <Button type="primary">
-            </Admin>
+                <Link to={`/tenants/${this.props.tenant.getId()}/applications/create`}>Add application</Link>
+              </Button>
+            </Admin>,
           ]}
         />
-        <DataTable
+        <DataTable columns={this.columns()} getPage={this.getPage} rowKey="id" />
-          columns={this.columns()}
-          getPage={this.getPage}
-          rowKey="id"
-        />
       </Space>
     );
   }

ui/src/views/applications/ListIntegrations.tsx

@@ -22,7 +22,6 @@ import PilotThingsCard from "./integrations/PilotThingsCard";
 import LoRaCloudCard from "./integrations/LoRaCloudCard";
 import ThingsBoardCard from "./integrations/ThingsBoardCard";
 
-
 interface IProps {
   application: Application;
 }
@@ -32,7 +31,6 @@ interface IState {
   available: any[];
 }
 
-
 class ListIntegrations extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -137,13 +135,12 @@ class ListIntegrations extends Component<IProps, IState> {
         available.push(<ThingsBoardCard application={this.props.application} add />);
       }
 
-
       this.setState({
         configured: configured,
         available: available,
       });
     });
-  }
+  };
 
   render() {
     return (

ui/src/views/applications/integrations/AwsSnsCard.tsx

@@ -1,45 +1,41 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
-import {
+import { Application, DeleteAwsSnsIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  Application,
-  DeleteAwsSnsIntegrationRequest,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class AwsSns extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteAwsSnsIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
 
     ApplicationStore.deleteAwsSnsIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/aws-sns/create"><PlusOutlined /></Link>
+        <Link to="integrations/aws-sns/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/aws-sns/edit"><EditOutlined /></Link>,
+        <Link to="integrations/aws-sns/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -53,9 +49,7 @@ class AwsSns extends Component<IProps> {
           cover={<img alt="AWS SNS" src="/integrations/aws_sns.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The AWS SNS integration forwards events to an AWS SNS topic." />
-            description="The AWS SNS integration forwards events to an AWS SNS topic."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/AwsSnsIntegrationForm.tsx

@@ -2,11 +2,7 @@ import React, { Component } from "react";
 
 import { Form, Input, Button, Select } from "antd";
 
-import {
+import { AwsSnsIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  AwsSnsIntegration,
-  Encoding,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-
 
 interface IProps {
   initialValues: AwsSnsIntegration;
@@ -26,7 +22,7 @@ class AwsSnsIntegrationForm extends Component<IProps> {
     i.setTopicArn(v.topicArn);
 
     this.props.onFinish(i);
-  }
+  };
 
   render() {
     return (
@@ -41,11 +37,7 @@ class AwsSnsIntegrationForm extends Component<IProps> {
             <Select.Option value={Encoding.PROTOBUF}>Protobuf (binary)</Select.Option>
           </Select>
         </Form.Item>
-        <Form.Item
+        <Form.Item label="AWS region" name="region" rules={[{ required: true, message: "Please enter a region!" }]}>
-          label="AWS region"
-          name="region"
-          rules={[{required: true, message: "Please enter a region!"}]}
-        >
           <Input />
         </Form.Item>
         <Form.Item
@@ -70,7 +62,9 @@ class AwsSnsIntegrationForm extends Component<IProps> {
           <Input />
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/AzureServiceBusCard.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
 import {
@@ -11,34 +11,33 @@ import {
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class AzureServiceBusCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteAzureServiceBusIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deleteAzureServiceBusIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/azure-service-bus/create"><PlusOutlined /></Link>
+        <Link to="integrations/azure-service-bus/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/azure-service-bus/edit"><EditOutlined /></Link>,
+        <Link to="integrations/azure-service-bus/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +51,7 @@ class AzureServiceBusCard extends Component<IProps> {
           cover={<img alt="Azure Service-Bus" src="/integrations/azure_service_bus.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The Azure Service-Bus integration forwards events to an Azure Service-Bus topic or queue." />
-            description="The Azure Service-Bus integration forwards events to an Azure Service-Bus topic or queue."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/AzureServiceBusIntegrationForm.tsx

@@ -2,18 +2,13 @@ import React, { Component } from "react";
 
 import { Form, Input, Button, Select } from "antd";
 
-import {
+import { AzureServiceBusIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  AzureServiceBusIntegration,
-  Encoding,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-
 
 interface IProps {
   initialValues: AzureServiceBusIntegration;
   onFinish: (obj: AzureServiceBusIntegration) => void;
 }
 
-
 class AzureServiceBusIntegrationForm extends Component<IProps> {
   onFinish = (values: AzureServiceBusIntegration.AsObject) => {
     const v = Object.assign(this.props.initialValues.toObject(), values);
@@ -25,7 +20,7 @@ class AzureServiceBusIntegrationForm extends Component<IProps> {
     i.setPublishName(v.publishName);
 
     this.props.onFinish(i);
-  }
+  };
 
   render() {
     return (
@@ -56,7 +51,9 @@ class AzureServiceBusIntegrationForm extends Component<IProps> {
           <Input />
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/CreateAwsSnsIntegration.tsx

@@ -24,9 +24,11 @@ class CreateAwsSnsIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createAwsSnsIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new AwsSnsIntegration();

ui/src/views/applications/integrations/CreateAzureServiceBusIntegration.tsx

@@ -12,12 +12,10 @@ import {
 import AzureServiceBusIntegrationForm from "./AzureServiceBusIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 class CreateAzureServiceBusIntegration extends Component<IProps> {
   onFinish = (obj: AzureServiceBusIntegration) => {
     obj.setApplicationId(this.props.application.getId());
@@ -26,9 +24,11 @@ class CreateAzureServiceBusIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createAzureServiceBusIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new AzureServiceBusIntegration();

ui/src/views/applications/integrations/CreateGcpPubSubIntegration.tsx

@@ -12,12 +12,10 @@ import {
 import GcpPubSubIntegrationForm from "./GcpPubSubIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 class CreateGcpPubSubIntegration extends Component<IProps> {
   onFinish = (obj: GcpPubSubIntegration) => {
     obj.setApplicationId(this.props.application.getId());
@@ -26,9 +24,11 @@ class CreateGcpPubSubIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createGcpPubSubIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new GcpPubSubIntegration();

ui/src/views/applications/integrations/CreateHttpIntegration.tsx

@@ -12,7 +12,6 @@ import {
 import HttpIntegrationForm from "./HttpIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
@@ -25,9 +24,11 @@ class CreateHttpIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createHttpIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new HttpIntegration();

ui/src/views/applications/integrations/CreateInfluxDbIntegration.tsx

@@ -12,12 +12,10 @@ import {
 import InfluxDbIntegrationForm from "./InfluxDbIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 class CreateInfluxDbIntegration extends Component<IProps> {
   onFinish = (obj: InfluxDbIntegration) => {
     obj.setApplicationId(this.props.application.getId());
@@ -26,9 +24,11 @@ class CreateInfluxDbIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createInfluxDbIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new InfluxDbIntegration();

ui/src/views/applications/integrations/CreateLoRaCloudIntegration.tsx

@@ -10,16 +10,13 @@ import {
   CreateLoraCloudIntegrationRequest,
 } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
-
 import LoRaCloudIntegrationForm from "./LoRaCloudIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 class CreateLoRaCloudIntegration extends Component<IProps> {
   onFinish = (obj: LoraCloudIntegration) => {
     obj.setApplicationId(this.props.application.getId());
@@ -28,9 +25,11 @@ class CreateLoRaCloudIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createLoraCloudIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     let i = new LoraCloudIntegration();
@@ -41,7 +40,6 @@ class CreateLoRaCloudIntegration extends Component<IProps> {
 
     i.setModemGeolocationServices(mgs);
 
-
     return (
       <Card title="Add Semtech LoRa Cloud&trade; integration">
         <LoRaCloudIntegrationForm initialValues={i} onFinish={this.onFinish} />

ui/src/views/applications/integrations/CreateMyDevicesIntegration.tsx

@@ -12,12 +12,10 @@ import {
 import MyDevicesIntegrationForm from "./MyDevicesIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 class CreateMyDevicesIntegration extends Component<IProps> {
   onFinish = (obj: MyDevicesIntegration) => {
     obj.setApplicationId(this.props.application.getId());
@@ -26,9 +24,11 @@ class CreateMyDevicesIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createMyDevicesIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new MyDevicesIntegration();

ui/src/views/applications/integrations/CreatePilotThingsIntegration.tsx

@@ -12,12 +12,10 @@ import {
 import PilotThingsIntegrationForm from "./PilotThingsIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 class CreatePilotThingsIntegration extends Component<IProps> {
   onFinish = (obj: PilotThingsIntegration) => {
     obj.setApplicationId(this.props.application.getId());
@@ -26,9 +24,11 @@ class CreatePilotThingsIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createPilotThingsIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new PilotThingsIntegration();

ui/src/views/applications/integrations/CreateThingsBoardIntegration.tsx

@@ -12,12 +12,10 @@ import {
 import ThingsBoardIntegrationForm from "./ThingsBoardIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 class CreateThingsBoardIntegration extends Component<IProps> {
   onFinish = (obj: ThingsBoardIntegration) => {
     obj.setApplicationId(this.props.application.getId());
@@ -26,9 +24,11 @@ class CreateThingsBoardIntegration extends Component<IProps> {
     req.setIntegration(obj);
 
     ApplicationStore.createThingsBoardIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     const i = new ThingsBoardIntegration();

ui/src/views/applications/integrations/EditAwsSnsIntegration.tsx

@@ -22,7 +22,6 @@ interface IState {
   integration?: AwsSnsIntegration;
 }
 
-
 class EditAwsSnsIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -45,9 +44,11 @@ class EditAwsSnsIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateAwsSnsIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditAzureServiceBusIntegration.tsx

@@ -14,17 +14,14 @@ import {
 import AzureServiceBusIntegrationForm from "./AzureServiceBusIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 interface IState {
   integration?: AzureServiceBusIntegration;
 }
 
-
 class EditAzureServiceBusIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -47,9 +44,11 @@ class EditAzureServiceBusIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateAzureServiceBusIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditGcpPubSubIntegration.tsx

@@ -14,17 +14,14 @@ import {
 import GcpPubSubIntegrationForm from "./GcpPubSubIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 interface IState {
   integration?: GcpPubSubIntegration;
 }
 
-
 class EditGcpPubSubIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -47,9 +44,11 @@ class EditGcpPubSubIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateGcpPubSubIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditHttpIntegration.tsx

@@ -14,7 +14,6 @@ import {
 import HttpIntegrationForm from "./HttpIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
@@ -45,9 +44,11 @@ class EditHttpIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateHttpIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditInfluxDbIntegration.tsx

@@ -14,17 +14,14 @@ import {
 import InfluxDbIntegrationForm from "./InfluxDbIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 interface IState {
   integration?: InfluxDbIntegration;
 }
 
-
 class EditInfluxDbIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -47,10 +44,11 @@ class EditInfluxDbIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateInfluxDbIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-
+  };
-  }
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditLoRaCloudIntegration.tsx

@@ -14,17 +14,14 @@ import {
 import LoRaCloudIntegrationForm from "./LoRaCloudIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 interface IState {
   integration?: LoraCloudIntegration;
 }
 
-
 class EditLoRaCloudIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -47,9 +44,11 @@ class EditLoRaCloudIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateLoraCloudIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditMyDevicesIntegration.tsx

@@ -14,7 +14,6 @@ import {
 import MyDevicesIntegrationForm from "./MyDevicesIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
@@ -23,7 +22,6 @@ interface IState {
   integration?: MyDevicesIntegration;
 }
 
-
 class EditMyDevicesIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -46,9 +44,11 @@ class EditMyDevicesIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateMyDevicesIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditPilotThingsIntegration.tsx

@@ -14,17 +14,14 @@ import {
 import PilotThingsIntegrationForm from "./PilotThingsIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
 
-
 interface IState {
   integration?: PilotThingsIntegration;
 }
 
-
 class EditPilotThingsIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -47,9 +44,11 @@ class EditPilotThingsIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updatePilotThingsIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/EditThingsBoardIntegration.tsx

@@ -14,7 +14,6 @@ import {
 import ThingsBoardIntegrationForm from "./ThingsBoardIntegrationForm";
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps extends RouteComponentProps {
   application: Application;
 }
@@ -23,7 +22,6 @@ interface IState {
   integration?: ThingsBoardIntegration;
 }
 
-
 class EditThingsBoardIntegration extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -46,9 +44,11 @@ class EditThingsBoardIntegration extends Component<IProps, IState> {
     req.setIntegration(obj);
 
     ApplicationStore.updateThingsBoardIntegration(req, () => {
-      this.props.history.push(`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`);
+      this.props.history.push(
+        `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
+      );
     });
-  }
+  };
 
   render() {
     if (this.state.integration === undefined) {

ui/src/views/applications/integrations/GcpPubSubCard.tsx

@@ -1,44 +1,40 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
-import {
+import { Application, DeleteGcpPubSubIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  Application,
-  DeleteGcpPubSubIntegrationRequest,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class GcpPubSubCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteGcpPubSubIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deleteGcpPubSubIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/gcp-pub-sub/create"><PlusOutlined /></Link>
+        <Link to="integrations/gcp-pub-sub/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/gcp-pub-sub/edit"><EditOutlined /></Link>,
+        <Link to="integrations/gcp-pub-sub/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +48,7 @@ class GcpPubSubCard extends Component<IProps> {
           cover={<img alt="GCP Pub/Sub" src="/integrations/gcp_pubsub.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The Google Cloud Pub/Sub integration forwards events to a GCP Pub/Sub topic." />
-            description="The Google Cloud Pub/Sub integration forwards events to a GCP Pub/Sub topic."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/GcpPubSubIntegrationForm.tsx

@@ -2,18 +2,13 @@ import React, { Component } from "react";
 
 import { Form, Input, Button, Select } from "antd";
 
-import {
+import { GcpPubSubIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  GcpPubSubIntegration,
-  Encoding,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-
 
 interface IProps {
   initialValues: GcpPubSubIntegration;
   onFinish: (obj: GcpPubSubIntegration) => void;
 }
 
-
 class GcpPubSubIntegrationForm extends Component<IProps> {
   onFinish = (values: GcpPubSubIntegration.AsObject) => {
     const v = Object.assign(this.props.initialValues.toObject(), values);
@@ -26,7 +21,7 @@ class GcpPubSubIntegrationForm extends Component<IProps> {
     i.setCredentialsFile(v.credentialsFile);
 
     this.props.onFinish(i);
-  }
+  };
 
   render() {
     return (
@@ -64,7 +59,9 @@ class GcpPubSubIntegrationForm extends Component<IProps> {
           <Input.TextArea rows={10} />
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/GenerateMqttCertificate.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
 import moment from "moment";
-import { Card, Button, Form, Input } from 'antd';
+import { Card, Button, Form, Input } from "antd";
 
 import {
   Application,
@@ -11,18 +11,15 @@ import {
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
   application: Application;
 }
 
-
 interface IState {
   certificate?: GenerateMqttIntegrationClientCertificateResponse;
   buttonDisabled: boolean;
 }
 
-
 class GenerateMqttCertificate extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -40,28 +37,35 @@ class GenerateMqttCertificate extends Component<IProps, IState> {
     let req = new GenerateMqttIntegrationClientCertificateRequest();
     req.setApplicationId(this.props.application.getId());
 
-    ApplicationStore.generateMqttIntegrationClientCertificate(req, (resp: GenerateMqttIntegrationClientCertificateResponse) => {
+    ApplicationStore.generateMqttIntegrationClientCertificate(
+      req,
+      (resp: GenerateMqttIntegrationClientCertificateResponse) => {
         this.setState({
           certificate: resp,
         });
-    });
+      },
-  }
+    );
+  };
 
   renderRequest = () => {
     return (
       <Card>
         <p>
-          If required by the network, the MQTT client needs to be configured with a client certificate
+          If required by the network, the MQTT client needs to be configured with a client certificate in order to
-          in order to connect to the MQTT broker to receive device data. The generated certificate is
+          connect to the MQTT broker to receive device data. The generated certificate is application specific.
-          application specific. 
+          <strong>
-          <strong> Please note the expiration of the certificate and make sure to renew the certificate on time!</strong>
+            {" "}
+            Please note the expiration of the certificate and make sure to renew the certificate on time!
+          </strong>
         </p>
         <p>
-          <Button onClick={this.requestCertificate} disabled={this.state.buttonDisabled}>Generate certificate</Button>
+          <Button onClick={this.requestCertificate} disabled={this.state.buttonDisabled}>
+            Generate certificate
+          </Button>
         </p>
       </Card>
     );
-  }
+  };
 
   renderResponse = () => {
     const certificate = this.state.certificate!;
@@ -89,23 +93,15 @@ class GenerateMqttCertificate extends Component<IProps, IState> {
         >
           <Input.TextArea autoSize disabled style={{ cursor: "text", fontFamily: "monospace", color: "black" }} />
         </Form.Item>
-        <Form.Item
+        <Form.Item label="TLS certificate" name="tlsCert" tooltip="Store this as a text-file, e.g. named 'cert.crt'">
-          label="TLS certificate"
-          name="tlsCert"
-          tooltip="Store this as a text-file, e.g. named 'cert.crt'"
-        >
           <Input.TextArea autoSize disabled style={{ cursor: "text", fontFamily: "monospace", color: "black" }} />
         </Form.Item>
-        <Form.Item
+        <Form.Item label="TLS key" name="tlsKey" tooltip="Store this as a text-file, e.g. named 'cert.key'">
-          label="TLS key"
-          name="tlsKey"
-          tooltip="Store this as a text-file, e.g. named 'cert.key'"
-        >
           <Input.TextArea autoSize disabled style={{ cursor: "text", fontFamily: "monospace", color: "black" }} />
         </Form.Item>
       </Form>
     );
-  }
+  };
 
   render() {
     let content = this.renderRequest();
@@ -114,11 +110,7 @@ class GenerateMqttCertificate extends Component<IProps, IState> {
       content = this.renderResponse();
     }
 
-    return(
+    return <Card title="Generate MQTT certificate">{content}</Card>;
-      <Card title="Generate MQTT certificate">
-        {content}
-      </Card>
-    );
   }
 }
 

ui/src/views/applications/integrations/HttpCard.tsx

@@ -1,44 +1,40 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
-import {
+import { Application, DeleteHttpIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  Application,
-  DeleteHttpIntegrationRequest,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class HttpCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteHttpIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deleteHttpIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/http/create"><PlusOutlined /></Link>
+        <Link to="integrations/http/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/http/edit"><EditOutlined /></Link>,
+        <Link to="integrations/http/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +48,7 @@ class HttpCard extends Component<IProps> {
           cover={<img alt="HTTP" src="/integrations/http.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The HTTP integration forwards events to a user-configurable endpoint as POST requests." />
-            description="The HTTP integration forwards events to a user-configurable endpoint as POST requests."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/HttpIntegrationForm.tsx

@@ -1,13 +1,9 @@
 import React, { Component } from "react";
 
 import { Form, Input, Button, Select, Row, Col, Typography, Space } from "antd";
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-
-import {
-  HttpIntegration,
-  Encoding,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { HttpIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 interface IProps {
   initialValues: HttpIntegration;
@@ -29,7 +25,7 @@ class HttpIntegrationForm extends Component<IProps> {
     }
 
     this.props.onFinish(i);
-  }
+  };
 
   render() {
     return (
@@ -64,7 +60,7 @@ class HttpIntegrationForm extends Component<IProps> {
                         {...restField}
                         name={[name, 0]}
                         fieldKey={[name, 0]}
-                        rules={[{ required: true, message: 'Please enter a key!' }]}
+                        rules={[{ required: true, message: "Please enter a key!" }]}
                       >
                         <Input placeholder="Key" />
                       </Form.Item>
@@ -74,7 +70,7 @@ class HttpIntegrationForm extends Component<IProps> {
                         {...restField}
                         name={[name, 1]}
                         fieldKey={[name, 1]}
-                        rules={[{ required: true, message: 'Please enter a value!' }]}
+                        rules={[{ required: true, message: "Please enter a value!" }]}
                       >
                         <Input placeholder="Value" />
                       </Form.Item>
@@ -94,7 +90,9 @@ class HttpIntegrationForm extends Component<IProps> {
           </Form.List>
         </Space>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/InfluxDbIntegrationForm.tsx

@@ -8,18 +8,15 @@ import {
   InfluxDbVersion,
 } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
-
 interface IProps {
   initialValues: InfluxDbIntegration;
   onFinish: (obj: InfluxDbIntegration) => void;
 }
 
-
 interface IState {
   selectedVersion: InfluxDbVersion;
 }
 
-
 class InfluxDbIntegrationForm extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -45,13 +42,13 @@ class InfluxDbIntegrationForm extends Component<IProps, IState> {
     i.setToken(v.token);
 
     this.props.onFinish(i);
-  }
+  };
 
   onVersionChange = (version: InfluxDbVersion) => {
     this.setState({
       selectedVersion: version,
     });
-  }
+  };
 
   render() {
     return (
@@ -71,40 +68,38 @@ class InfluxDbIntegrationForm extends Component<IProps, IState> {
           name="endpoint"
           rules={[{ required: true, message: "Please enter an endpoint!" }]}
         >
-          <Input
+          <Input placeholder="http://localhost:8086/api/v2/write" />
-            placeholder="http://localhost:8086/api/v2/write"
-          />
         </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && <Form.Item
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && (
-          label="Username"
+          <Form.Item label="Username" name="username">
-          name="username"
-        >
             <Input />
-        </Form.Item>}
+          </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && <Form.Item
+        )}
-          label="Password"
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && (
-          name="password"
+          <Form.Item label="Password" name="password">
-        >
             <Input.Password />
-        </Form.Item>}
+          </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && <Form.Item
+        )}
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && (
+          <Form.Item
             label="Database name"
             name="db"
             rules={[{ required: true, message: "Please enter database name!" }]}
           >
             <Input />
-        </Form.Item>}
+          </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && <Form.Item
+        )}
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && (
+          <Form.Item
             label="Retention policy name"
             name="retentionPolicyName"
             tooltip="Sets the target retention policy for the write. InfluxDB writes to the DEFAULT retention policy if you do not specify a retention policy."
           >
             <Input />
-        </Form.Item>}
+          </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && <Form.Item
+        )}
-          label="Select timestamp precision"
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_1 && (
-          name="precision"
+          <Form.Item label="Select timestamp precision" name="precision">
-        >
             <Select>
               <Select.Option value={InfluxDbPrecision.NS}>Nanosecond</Select.Option>
               <Select.Option value={InfluxDbPrecision.U}>Microsecond</Select.Option>
@@ -113,27 +108,27 @@ class InfluxDbIntegrationForm extends Component<IProps, IState> {
               <Select.Option value={InfluxDbPrecision.M}>Minute</Select.Option>
               <Select.Option value={InfluxDbPrecision.H}>Hour</Select.Option>
             </Select>
-        </Form.Item>}
+          </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_2 && <Form.Item
+        )}
-          label="Organization"
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_2 && (
-          name="organization"
+          <Form.Item label="Organization" name="organization">
-        >
             <Input />
-        </Form.Item>}
+          </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_2 && <Form.Item
+        )}
-          label="Bucket"
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_2 && (
-          name="bucket"
+          <Form.Item label="Bucket" name="bucket">
-        >
             <Input />
-        </Form.Item>}
+          </Form.Item>
-        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_2 && <Form.Item
+        )}
-          label="Token"
+        {this.state.selectedVersion === InfluxDbVersion.INFLUXDB_2 && (
-          name="token"
+          <Form.Item label="Token" name="token">
-        >
             <Input.Password />
-        </Form.Item>}
+          </Form.Item>
+        )}
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/InfluxdbCard.tsx

@@ -1,44 +1,40 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
-import {
+import { Application, DeleteInfluxDbIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  Application,
-  DeleteInfluxDbIntegrationRequest,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class InfluxdbCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteInfluxDbIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deleteInfluxDbIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/influxdb/create"><PlusOutlined /></Link>
+        <Link to="integrations/influxdb/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/influxdb/edit"><EditOutlined /></Link>,
+        <Link to="integrations/influxdb/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +48,7 @@ class InfluxdbCard extends Component<IProps> {
           cover={<img alt="InfluxDB" src="/integrations/influxdb.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The InfluxDB integration writes events into an InfluxDB time-series database." />
-            description="The InfluxDB integration writes events into an InfluxDB time-series database."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/LoRaCloudCard.tsx

@@ -1,44 +1,40 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
-import {
+import { Application, DeleteLoraCloudIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  Application,
-  DeleteLoraCloudIntegrationRequest,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class LoRaCloudCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteLoraCloudIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deleteLoraCloudIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/loracloud/create"><PlusOutlined /></Link>
+        <Link to="integrations/loracloud/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/loracloud/edit"><EditOutlined /></Link>,
+        <Link to="integrations/loracloud/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +48,7 @@ class LoRaCloudCard extends Component<IProps> {
           cover={<img alt="Semtech LoRa Cloud" src="/integrations/loracloud.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The Semtech LoRa Cloud integration provides Modem & Geolocation Services." />
-            description="The Semtech LoRa Cloud integration provides Modem & Geolocation Services."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/LoRaCloudIntegrationForm.tsx

@@ -7,13 +7,11 @@ import {
   LoraCloudModemGeolocationServices,
 } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
-
 interface IProps {
   initialValues: LoraCloudIntegration;
   onFinish: (obj: LoraCloudIntegration) => void;
 }
 
-
 interface IState {
   modemEnabled: boolean;
   geolocationTdoa: boolean;
@@ -22,7 +20,6 @@ interface IState {
   geolocationGnss: boolean;
 }
 
-
 class LoRaCloudIntegrationForm extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -56,7 +53,6 @@ class LoRaCloudIntegrationForm extends Component<IProps, IState> {
 
     let mgs = new LoraCloudModemGeolocationServices();
 
-
     if (mgsv !== undefined) {
       mgs.setToken(mgsv.token);
       mgs.setModemEnabled(mgsv.modemEnabled);
@@ -80,37 +76,37 @@ class LoRaCloudIntegrationForm extends Component<IProps, IState> {
     i.setModemGeolocationServices(mgs);
 
     this.props.onFinish(i);
-  }
+  };
 
   onModemEnabledChange = (v: boolean) => {
     this.setState({
       modemEnabled: v,
     });
-  }
+  };
 
   onGeolocationTdoaChange = (v: boolean) => {
     this.setState({
       geolocationTdoa: v,
     });
-  }
+  };
 
   onGeolocationRssiChange = (v: boolean) => {
     this.setState({
       geolocationRssi: v,
     });
-  }
+  };
 
   onGeolocationWifiChange = (v: boolean) => {
     this.setState({
       geolocationWifi: v,
     });
-  }
+  };
 
   onGeolocationGnssChange = (v: boolean) => {
     this.setState({
       geolocationGnss: v,
     });
-  }
+  };
 
   render() {
     return (
@@ -132,38 +128,46 @@ class LoRaCloudIntegrationForm extends Component<IProps, IState> {
             >
               <Switch onChange={this.onModemEnabledChange} />
             </Form.Item>
-            {this.state.modemEnabled && <Form.Item
+            {this.state.modemEnabled && (
+              <Form.Item
                 label="GNSS port (FPort)"
                 name={["modemGeolocationServices", "gnssPort"]}
                 tooltip="ChirpStack will only forward the FRMPayload for GNSS geolocation to LoRa Cloud when the uplink matches the configured port."
                 rules={[{ required: true, message: "Please enter a port number!" }]}
               >
                 <InputNumber min={0} max={255} />
-            </Form.Item>}
+              </Form.Item>
-            {this.state.modemEnabled && <Form.Item
+            )}
+            {this.state.modemEnabled && (
+              <Form.Item
                 label="Modem port (FPort)"
                 name={["modemGeolocationServices", "modemPort"]}
                 tooltip="ChirpStack will only forward the FRMPayload to LoRa Cloud when the uplink matches the configured port."
                 rules={[{ required: true, message: "Please enter a port number!" }]}
               >
                 <InputNumber min={0} max={255} />
-            </Form.Item>}
+              </Form.Item>
-            {this.state.modemEnabled && <Form.Item
+            )}
+            {this.state.modemEnabled && (
+              <Form.Item
                 label="Use receive timestamp for GNSS geolocation"
                 name={["modemGeolocationServices", "gnssUseRxTime"]}
                 tooltip="If enabled, the receive timestamp of the gateway will be used as reference instead of the timestamp included in the GNSS payload."
                 valuePropName="checked"
               >
                 <Switch />
-            </Form.Item>}
+              </Form.Item>
-            {this.state.modemEnabled && <Form.Item
+            )}
+            {this.state.modemEnabled && (
+              <Form.Item
                 label="My device adheres to the LoRa Edge&trade; Tracker Reference Design protocol"
                 name={["modemGeolocationServices", "parseTlv"]}
                 tooltip="If enabled, ChirpStack Application Server will try to resolve the location of the device if a geolocation payload is detected."
                 valuePropName="checked"
               >
                 <Switch />
-            </Form.Item>}
+              </Form.Item>
+            )}
             <Collapse style={{ marginBottom: 24 }}>
               <Collapse.Panel header="Advanced geolocation options" key={1}>
                 <Form.Item
@@ -198,47 +202,59 @@ class LoRaCloudIntegrationForm extends Component<IProps, IState> {
                 >
                   <Switch onChange={this.onGeolocationGnssChange} />
                 </Form.Item>
-                {(this.state.geolocationTdoa || this.state.geolocationRssi) && <Form.Item
+                {(this.state.geolocationTdoa || this.state.geolocationRssi) && (
+                  <Form.Item
                     label="Geolocation buffer (TTL in seconds)"
                     name={["modemGeolocationServices", "geolocationBufferTtl"]}
                     tooltip="The time in seconds that historical uplinks will be stored in the geolocation buffer. Used for TDOA and RSSI geolocation."
                   >
                     <InputNumber min={0} max={86400} />
-                </Form.Item>}
+                  </Form.Item>
-                {(this.state.geolocationTdoa || this.state.geolocationRssi) && <Form.Item
+                )}
+                {(this.state.geolocationTdoa || this.state.geolocationRssi) && (
+                  <Form.Item
                     label="Geolocation min buffer size"
                     name={["modemGeolocationServices", "geolocationMinBufferSize"]}
                     tooltip="The minimum buffer size required before using geolocation. Using multiple uplinks for geolocation can increase the accuracy of the geolocation results. Used for TDOA and RSSI geolocation."
                   >
                     <InputNumber min={0} />
-                </Form.Item>}
+                  </Form.Item>
-                {this.state.geolocationWifi && <Form.Item
+                )}
+                {this.state.geolocationWifi && (
+                  <Form.Item
                     label="Wifi payload field"
                     name={["modemGeolocationServices", "geolocationWifiPayloadField"]}
                     tooltip="This must match the name of the field in the decoded payload which holds array of Wifi access-points. Each element in the array must contain two keys: 1) macAddress: array of 6 bytes, 2) signalStrength: RSSI of the access-point."
                   >
                     <Input />
-                </Form.Item>}
+                  </Form.Item>
-                {this.state.geolocationGnss && <Form.Item
+                )}
+                {this.state.geolocationGnss && (
+                  <Form.Item
                     label="GNSS payload field"
                     name={["modemGeolocationServices", "geolocationGnssPayloadField"]}
                     tooltip="This must match the name of the field in the decoded payload which holds the LR1110 GNSS bytes."
                   >
                     <Input />
-                </Form.Item>}
+                  </Form.Item>
-                {this.state.geolocationGnss && <Form.Item
+                )}
+                {this.state.geolocationGnss && (
+                  <Form.Item
                     label="Use receive timestamp for GNSS geolocation"
                     name={["modemGeolocationServices", "geolocationGnssUseRxTime"]}
                     valuePropName="checked"
                   >
                     <Switch />
-                </Form.Item>}
+                  </Form.Item>
+                )}
               </Collapse.Panel>
             </Collapse>
           </Tabs.TabPane>
         </Tabs>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/MqttCard.tsx

@@ -1,23 +1,17 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card } from 'antd';
+import { Col, Card } from "antd";
-
-import {
-  Application,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 interface IProps {
-  application: Application,
+  application: Application;
 }
 
-
 class HttpCard extends Component<IProps> {
   render() {
-    let actions: any[] = [
+    let actions: any[] = [<Link to="integrations/mqtt/certificate">Get certificate</Link>];
-      <Link to="integrations/mqtt/certificate">Get certificate</Link>
-    ];
 
     return (
       <Col span={8}>
@@ -27,9 +21,7 @@ class HttpCard extends Component<IProps> {
           cover={<img alt="MQTT" src="/integrations/mqtt.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The MQTT integration forwards events to a MQTT broker." />
-            description="The MQTT integration forwards events to a MQTT broker."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/MyDevicesCard.tsx

@@ -1,44 +1,40 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
-import {
+import { Application, DeleteMyDevicesIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  Application,
-  DeleteMyDevicesIntegrationRequest,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class MyDevicesCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteMyDevicesIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deleteMyDevicesIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/mydevices/create"><PlusOutlined /></Link>
+        <Link to="integrations/mydevices/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/mydevices/edit"><EditOutlined /></Link>,
+        <Link to="integrations/mydevices/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +48,7 @@ class MyDevicesCard extends Component<IProps> {
           cover={<img alt="myDevices" src="/integrations/my_devices.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The myDevices integration forwards events to the myDevices platform." />
-            description="The myDevices integration forwards events to the myDevices platform."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/MyDevicesIntegrationForm.tsx

@@ -2,23 +2,18 @@ import React, { Component } from "react";
 
 import { Form, Input, Button, Select } from "antd";
 
-import {
+import { MyDevicesIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  MyDevicesIntegration,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-
 
 interface IProps {
   initialValues: MyDevicesIntegration;
   onFinish: (obj: MyDevicesIntegration) => void;
 }
 
-
 interface IState {
   selectedEndpoint: string;
   customEndpoint: string;
 }
 
-
 class MyDevicesIntegrationForm extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -40,19 +35,19 @@ class MyDevicesIntegrationForm extends Component<IProps, IState> {
     }
 
     this.props.onFinish(i);
-  }
+  };
 
   onEndpointChange = (v: string) => {
     this.setState({
       selectedEndpoint: v,
     });
-  }
+  };
 
   onCustomEndpointChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({
       customEndpoint: e.target.value,
     });
-  }
+  };
 
   render() {
     return (
@@ -64,19 +59,25 @@ class MyDevicesIntegrationForm extends Component<IProps, IState> {
         >
           <Select onChange={this.onEndpointChange}>
             <Select.Option value="https://lora.mydevices.com/v1/networks/chirpstackio/uplink">Cayenne</Select.Option>
-            <Select.Option value="https://lora.iotinabox.com/v1/networks/iotinabox.chirpstackio/uplink">IoT in a Box</Select.Option>
+            <Select.Option value="https://lora.iotinabox.com/v1/networks/iotinabox.chirpstackio/uplink">
+              IoT in a Box
+            </Select.Option>
             <Select.Option value="custom">Custom endpoint URL</Select.Option>
           </Select>
         </Form.Item>
-        {this.state.selectedEndpoint === "custom" && <Form.Item
+        {this.state.selectedEndpoint === "custom" && (
+          <Form.Item
             label="myDevices API endpoint"
             name="customEndpoint"
             rules={[{ required: true, message: "Please enter an API endpoint!" }]}
           >
             <Input onChange={this.onCustomEndpointChange} />
-        </Form.Item>}
+          </Form.Item>
+        )}
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/PilotThingsCard.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
 import {
@@ -11,34 +11,33 @@ import {
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class PilotThingsCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeletePilotThingsIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deletePilotThingsIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/pilot-things/create"><PlusOutlined /></Link>
+        <Link to="integrations/pilot-things/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/pilot-things/edit"><EditOutlined /></Link>,
+        <Link to="integrations/pilot-things/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +51,7 @@ class PilotThingsCard extends Component<IProps> {
           cover={<img alt="Pilot Things" src="/integrations/pilot_things.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The Pilot Things integration forwards messages to a Pilot Things instance." />
-            description="The Pilot Things integration forwards messages to a Pilot Things instance."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/PilotThingsIntegrationForm.tsx

@@ -2,18 +2,13 @@ import React, { Component } from "react";
 
 import { Form, Input, Button } from "antd";
 
-import {
+import { PilotThingsIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  PilotThingsIntegration,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-
-
 
 interface IProps {
   initialValues: PilotThingsIntegration;
   onFinish: (obj: PilotThingsIntegration) => void;
 }
 
-
 class PilotThingsIntegrationForm extends Component<IProps> {
   onFinish = (values: PilotThingsIntegration.AsObject) => {
     const v = Object.assign(this.props.initialValues.toObject(), values);
@@ -24,7 +19,7 @@ class PilotThingsIntegrationForm extends Component<IProps> {
     i.setToken(v.token);
 
     this.props.onFinish(i);
-  }
+  };
 
   render() {
     return (
@@ -44,7 +39,9 @@ class PilotThingsIntegrationForm extends Component<IProps> {
           <Input.Password />
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/applications/integrations/ThingsBoardCard.tsx

@@ -1,44 +1,43 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Card, Popconfirm } from 'antd';
+import { Col, Card, Popconfirm } from "antd";
 import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
 import {
   Application,
-  DeleteThingsBoardIntegrationRequest
+  DeleteThingsBoardIntegrationRequest,
 } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
 import ApplicationStore from "../../../stores/ApplicationStore";
 
-
 interface IProps {
-  application: Application,
+  application: Application;
   add?: boolean;
 }
 
-
 class ThingsBoardCard extends Component<IProps> {
   onDelete = () => {
     let req = new DeleteThingsBoardIntegrationRequest();
     req.setApplicationId(this.props.application.getId());
     ApplicationStore.deleteThingsBoardIntegration(req, () => {});
-  }
+  };
 
   render() {
     let actions: any[] = [];
 
     if (!!this.props.add) {
       actions = [
-        <Link to="integrations/thingsboard/create"><PlusOutlined /></Link>
+        <Link to="integrations/thingsboard/create">
+          <PlusOutlined />
+        </Link>,
       ];
     } else {
       actions = [
-        <Link to="integrations/thingsboard/edit"><EditOutlined /></Link>,
+        <Link to="integrations/thingsboard/edit">
-        <Popconfirm
+          <EditOutlined />
-          title="Are you sure you want to delete this integration?"
+        </Link>,
-          onConfirm={this.onDelete}
+        <Popconfirm title="Are you sure you want to delete this integration?" onConfirm={this.onDelete}>
-        >
           <DeleteOutlined />
         </Popconfirm>,
       ];
@@ -52,9 +51,7 @@ class ThingsBoardCard extends Component<IProps> {
           cover={<img alt="ThingsBoard" src="/integrations/thingsboard.png" style={{ padding: 1 }} />}
           actions={actions}
         >
-          <Card.Meta
+          <Card.Meta description="The ThingsBoard integration forwards events to a ThingsBoard instance." />
-            description="The ThingsBoard integration forwards events to a ThingsBoard instance."
-          />
         </Card>
       </Col>
     );

ui/src/views/applications/integrations/ThingsBoardIntegrationForm.tsx

@@ -2,17 +2,13 @@ import React, { Component } from "react";
 
 import { Form, Input, Button, Typography } from "antd";
 
-import {
+import { ThingsBoardIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-  ThingsBoardIntegration,
-} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-
 
 interface IProps {
   initialValues: ThingsBoardIntegration;
   onFinish: (obj: ThingsBoardIntegration) => void;
 }
 
-
 class ThingsBoardIntegrationForm extends Component<IProps> {
   onFinish = (values: ThingsBoardIntegration.AsObject) => {
     const v = Object.assign(this.props.initialValues.toObject(), values);
@@ -22,7 +18,7 @@ class ThingsBoardIntegrationForm extends Component<IProps> {
     i.setServer(v.server);
 
     this.props.onFinish(i);
-  }
+  };
 
   render() {
     return (
@@ -36,11 +32,14 @@ class ThingsBoardIntegrationForm extends Component<IProps> {
         </Form.Item>
         <Form.Item>
           <Typography.Paragraph>
-            Each device must have a 'ThingsBoardAccessToken' variable assigned. This access-token is generated by ThingsBoard.
+            Each device must have a 'ThingsBoardAccessToken' variable assigned. This access-token is generated by
+            ThingsBoard.
           </Typography.Paragraph>
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import { presetPalettes } from '@ant-design/colors';
+import { presetPalettes } from "@ant-design/colors";
 import { Space, Breadcrumb, Card, Row, Col, PageHeader, Empty } from "antd";
 
 import moment from "moment";
@@ -51,17 +51,15 @@ class GatewaysMap extends Component<{},GatewaysMapState> {
         items: resp.getResultList(),
       });
     });
-  }
+  };
 
   render() {
     if (this.state.items.length === 0) {
-      return(
+      return <Empty />;
-        <Empty />
-      );
     }
 
     const boundsOptions: {
-      padding: PointTuple,
+      padding: PointTuple;
     } = {
       padding: [50, 50],
     };
@@ -79,7 +77,7 @@ class GatewaysMap extends Component<{},GatewaysMapState> {
       if (item.getLastSeenAt() !== undefined) {
         let ts = moment(item.getLastSeenAt()!.toDate());
         lastSeen = ts.fromNow();
-        if (ts.isBefore(moment().subtract(5, 'minutes'))) {
+        if (ts.isBefore(moment().subtract(5, "minutes"))) {
           color = "red";
         } else {
           color = "green";
@@ -89,11 +87,14 @@ class GatewaysMap extends Component<{},GatewaysMapState> {
       markers.push(
         <Marker position={pos} faIcon="wifi" color={color}>
           <Popup>
-            <Link to={`/tenants/${item.getTenantId()}/gateways/${item.getGatewayId()}`}>{item.getName()}</Link><br />
+            <Link to={`/tenants/${item.getTenantId()}/gateways/${item.getGatewayId()}`}>{item.getName()}</Link>
-              {item.getGatewayId()}<br /><br />
+            <br />
+            {item.getGatewayId()}
+            <br />
+            <br />
             {lastSeen}
           </Popup>
-        </Marker>
+        </Marker>,
       );
     }
 
@@ -105,18 +106,18 @@ class GatewaysMap extends Component<{},GatewaysMapState> {
   }
 }
 
-
 interface GatewayProps {
   summary?: GetGatewaysSummaryResponse;
 }
 
 class GatewaysActiveInactive extends Component<GatewayProps> {
   render() {
-    if (this.props.summary === undefined || (
+    if (
-      this.props.summary.getNeverSeenCount() === 0 &&
+      this.props.summary === undefined ||
+      (this.props.summary.getNeverSeenCount() === 0 &&
         this.props.summary.getInactiveCount() === 0 &&
-      this.props.summary.getActiveCount() === 0
+        this.props.summary.getActiveCount() === 0)
-    )) {
+    ) {
       return <Empty />;
     }
 
@@ -124,13 +125,13 @@ class GatewaysActiveInactive extends Component<GatewayProps> {
       labels: ["Never seen", "Inactive", "Active"],
       datasets: [
         {
-          data: [this.props.summary.getNeverSeenCount(), this.props.summary.getInactiveCount(), this.props.summary.getActiveCount()],
+          data: [
-          backgroundColor: [
+            this.props.summary.getNeverSeenCount(),
-            presetPalettes.orange.primary,
+            this.props.summary.getInactiveCount(),
-            presetPalettes.red.primary,
+            this.props.summary.getActiveCount(),
-            presetPalettes.green.primary,
           ],
-        }
+          backgroundColor: [presetPalettes.orange.primary, presetPalettes.red.primary, presetPalettes.green.primary],
+        },
       ],
     };
 
@@ -140,24 +141,22 @@ class GatewaysActiveInactive extends Component<GatewayProps> {
       animation: false,
     };
 
-    return(
+    return <Doughnut data={data} options={options} className="chart-doughtnut" />;
-      <Doughnut data={data} options={options} className="chart-doughtnut" />
-    );
   }
 }
 
-
 interface DeviceProps {
   summary?: GetDevicesSummaryResponse;
 }
 
 class DevicesActiveInactive extends Component<DeviceProps> {
   render() {
-    if (this.props.summary === undefined || (
+    if (
-      this.props.summary.getNeverSeenCount() === 0 &&
+      this.props.summary === undefined ||
+      (this.props.summary.getNeverSeenCount() === 0 &&
         this.props.summary.getInactiveCount() === 0 &&
-      this.props.summary.getActiveCount() === 0
+        this.props.summary.getActiveCount() === 0)
-    )) {
+    ) {
       return <Empty />;
     }
 
@@ -165,13 +164,13 @@ class DevicesActiveInactive extends Component<DeviceProps> {
       labels: ["Never seen", "Inactive", "Active"],
       datasets: [
         {
-          data: [this.props.summary.getNeverSeenCount(), this.props.summary.getInactiveCount(), this.props.summary.getActiveCount()],
+          data: [
-          backgroundColor: [
+            this.props.summary.getNeverSeenCount(),
-            presetPalettes.orange.primary,
+            this.props.summary.getInactiveCount(),
-            presetPalettes.red.primary,
+            this.props.summary.getActiveCount(),
-            presetPalettes.green.primary,
           ],
-        }
+          backgroundColor: [presetPalettes.orange.primary, presetPalettes.red.primary, presetPalettes.green.primary],
+        },
       ],
     };
 
@@ -181,18 +180,30 @@ class DevicesActiveInactive extends Component<DeviceProps> {
       animation: false,
     };
 
-    
+    return <Doughnut data={data} options={options} className="chart-doughtnut" />;
-    return(
-      <Doughnut data={data} options={options} className="chart-doughtnut" />
-    );
   }
 }
 
-
 class DevicesDataRates extends Component<DeviceProps> {
   getColor = (dr: number) => {
-    return ['#ff5722', '#ff9800', '#ffc107', '#ffeb3b', '#cddc39', '#8bc34a', '#4caf50', '#009688', '#00bcd4', '#03a9f4', '#2196f3', '#3f51b5', '#673ab7', '#9c27b0', '#e91e63'][dr];
+    return [
-  }
+      "#ff5722",
+      "#ff9800",
+      "#ffc107",
+      "#ffeb3b",
+      "#cddc39",
+      "#8bc34a",
+      "#4caf50",
+      "#009688",
+      "#00bcd4",
+      "#03a9f4",
+      "#2196f3",
+      "#3f51b5",
+      "#673ab7",
+      "#9c27b0",
+      "#e91e63",
+    ][dr];
+  };
 
   render() {
     if (this.props.summary === undefined || this.props.summary.getDrCountMap().toArray().length === 0) {
@@ -200,17 +211,19 @@ class DevicesDataRates extends Component<DeviceProps> {
     }
 
     let data: {
-      labels: string[],
+      labels: string[];
       datasets: {
-        data: number[],
+        data: number[];
-        backgroundColor: string[],
+        backgroundColor: string[];
-      }[],
+      }[];
     } = {
       labels: [],
-      datasets: [{
+      datasets: [
+        {
           data: [],
           backgroundColor: [],
-      }],
+        },
+      ],
     };
 
     for (const elm of this.props.summary.getDrCountMap().toArray()) {
@@ -225,13 +238,10 @@ class DevicesDataRates extends Component<DeviceProps> {
       animation: false,
     };
 
-    return(
+    return <Doughnut data={data} options={options} className="chart-doughtnut" />;
-      <Doughnut data={data} options={options} className="chart-doughtnut" />
-    );
   }
 }
 
-
 interface IProps {}
 
 interface IState {
@@ -263,14 +273,16 @@ class Dashboard extends Component<IProps, IState> {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Network Server</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Dashboard</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="Dashboard"
         />
         <Row gutter={24}>
@@ -290,7 +302,9 @@ class Dashboard extends Component<IProps, IState> {
             </Card>
           </Col>
         </Row>
-        <Card title="Gateway map"><GatewaysMap /></Card>
+        <Card title="Gateway map">
+          <GatewaysMap />
+        </Card>
       </Space>
     );
   }

ui/src/views/device-profiles/CreateDeviceProfile.tsx

@@ -4,18 +4,21 @@ import { Link, RouteComponentProps } from "react-router-dom";
 import { Space, Breadcrumb, Card, PageHeader } from "antd";
 
 import { MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
-import { DeviceProfile, CreateDeviceProfileRequest, CreateDeviceProfileResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import {
+  DeviceProfile,
+  CreateDeviceProfileRequest,
+  CreateDeviceProfileResponse,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
 import DeviceProfileForm from "./DeviceProfileForm";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
 
-
 interface IProps extends RouteComponentProps {
-  tenant: Tenant,
+  tenant: Tenant;
 }
 
-
 class CreateDeviceProfile extends Component<IProps> {
   onFinish = (obj: DeviceProfile) => {
     obj.setTenantId(this.props.tenant.getId());
@@ -26,7 +29,7 @@ class CreateDeviceProfile extends Component<IProps> {
     DeviceProfileStore.create(req, (_resp: CreateDeviceProfileResponse) => {
       this.props.history.push(`/tenants/${this.props.tenant.getId()}/device-profiles`);
     });
-  }
+  };
 
   render() {
     const codecScript = `// Decode uplink function.
@@ -74,20 +77,26 @@ function encodeDownlink(input) {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/device-profiles`}>Device profiles</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/device-profiles`}>Device profiles</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Add</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="Add device profile"
         />
         <Card>

ui/src/views/device-profiles/DeviceProfileForm.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
 import { Form, Input, Select, InputNumber, Switch, Row, Col, Button, Tabs } from "antd";
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 
 import { DeviceProfile, CodecRuntime } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 import { Region, MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
@@ -9,7 +9,6 @@ import { ListDeviceProfileAdrAlgorithmsResponse } from "@chirpstack/chirpstack-a
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
 import CodeEditor from "../../components/CodeEditor";
 
-
 interface IProps {
   initialValues: DeviceProfile;
   onFinish: (obj: DeviceProfile) => void;
@@ -24,7 +23,6 @@ interface IState {
   adrAlgorithms: [string, string][];
 }
 
-
 class DeviceProfileForm extends Component<IProps, IState> {
   formRef = React.createRef<any>();
 
@@ -101,51 +99,48 @@ class DeviceProfileForm extends Component<IProps, IState> {
     }
 
     this.props.onFinish(dp);
-  }
+  };
 
   onSupportsOtaaChange = (checked: boolean) => {
     this.setState({
       supportsOtaa: checked,
     });
-  }
+  };
 
   onSupportsClassBChnage = (checked: boolean) => {
     this.setState({
       supportsClassB: checked,
     });
-  }
+  };
 
   onSupportsClassCChange = (checked: boolean) => {
     this.setState({
       supportsClassC: checked,
     });
-  }
+  };
 
   onPayloadCodecRuntimeChange = (value: CodecRuntime) => {
     this.setState({
       payloadCodecRuntime: value,
     });
-  }
+  };
 
   render() {
-    const adrOptions = this.state.adrAlgorithms.map((v) => <Select.Option value={v[0]}>{v[1]}</Select.Option>);
+    const adrOptions = this.state.adrAlgorithms.map(v => <Select.Option value={v[0]}>{v[1]}</Select.Option>);
 
     return (
-      <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish} ref={this.formRef}>
+      <Form
+        layout="vertical"
+        initialValues={this.props.initialValues.toObject()}
+        onFinish={this.onFinish}
+        ref={this.formRef}
+      >
         <Tabs>
           <Tabs.TabPane tab="General" key="1">
-            <Form.Item
+            <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
-              label="Name"
-              name="name"
-              rules={[{required: true, message: "Please enter a name!"}]}
-            >
               <Input disabled={this.props.disabled} />
             </Form.Item>
-            <Form.Item
+            <Form.Item label="Region" name="region" rules={[{ required: true, message: "Please select a region!" }]}>
-              label="Region"
-              name="region"
-              rules={[{required: true, message: "Please select a region!"}]}
-            >
               <Select disabled={this.props.disabled}>
                 <Select.Option value={Region.AS923}>AS923</Select.Option>
                 <Select.Option value={Region.AS923_2}>AS923-2</Select.Option>
@@ -204,9 +199,7 @@ class DeviceProfileForm extends Component<IProps, IState> {
               name="adrAlgorithmId"
               rules={[{ required: true, message: "Please select an ADR algorithm!" }]}
             >
-              <Select disabled={this.props.disabled}>
+              <Select disabled={this.props.disabled}>{adrOptions}</Select>
-                {adrOptions}
-              </Select>
             </Form.Item>
             <Row gutter={24}>
               <Col span={8}>
@@ -241,14 +234,11 @@ class DeviceProfileForm extends Component<IProps, IState> {
             </Row>
           </Tabs.TabPane>
           <Tabs.TabPane tab="Join (OTAA / ABP)" key="2">
-            <Form.Item
+            <Form.Item label="Device supports OTAA" name="supportsOtaa" valuePropName="checked">
-              label="Device supports OTAA"
-              name="supportsOtaa"
-              valuePropName="checked"
-            >
               <Switch onChange={this.onSupportsOtaaChange} disabled={this.props.disabled} />
             </Form.Item>
-              {!this.state.supportsOtaa && <Row>
+            {!this.state.supportsOtaa && (
+              <Row>
                 <Col span={12}>
                   <Form.Item
                     label="RX1 delay"
@@ -268,8 +258,10 @@ class DeviceProfileForm extends Component<IProps, IState> {
                     <InputNumber min={0} max={15} disabled={this.props.disabled} />
                   </Form.Item>
                 </Col>
-              </Row>}
+              </Row>
-              {!this.state.supportsOtaa && <Row>
+            )}
+            {!this.state.supportsOtaa && (
+              <Row>
                 <Col span={12}>
                   <Form.Item
                     label="RX2 data-rate"
@@ -289,41 +281,38 @@ class DeviceProfileForm extends Component<IProps, IState> {
                     <InputNumber min={0} style={{ width: "200px" }} disabled={this.props.disabled} />
                   </Form.Item>
                 </Col>
-              </Row>}
+              </Row>
+            )}
           </Tabs.TabPane>
           <Tabs.TabPane tab="Class-B" key="3">
-            <Form.Item
+            <Form.Item label="Device supports Class-B" name="supportsClassB" valuePropName="checked">
-              label="Device supports Class-B"
-              name="supportsClassB"
-              valuePropName="checked"
-            >
               <Switch onChange={this.onSupportsClassBChnage} disabled={this.props.disabled} />
             </Form.Item>
-            {this.state.supportsClassB && <Form.Item
+            {this.state.supportsClassB && (
+              <Form.Item
                 label="Class-B confirmed downlink timeout (seconds)"
                 tooltip="Class-B timeout (in seconds) for confirmed downlink transmissions."
                 name="classBTimeout"
                 rules={[{ required: true, message: "Please enter a Class-B confirmed downlink timeout!" }]}
               >
                 <InputNumber min={0} />
-            </Form.Item>}
+              </Form.Item>
+            )}
           </Tabs.TabPane>
           <Tabs.TabPane tab="Class-C" key="4">
-            <Form.Item
+            <Form.Item label="Device supports Class-C" name="supportsClassC" valuePropName="checked">
-              label="Device supports Class-C"
-              name="supportsClassC"
-              valuePropName="checked"
-            >
               <Switch onChange={this.onSupportsClassCChange} disabled={this.props.disabled} />
             </Form.Item>
-            {this.state.supportsClassC && <Form.Item
+            {this.state.supportsClassC && (
+              <Form.Item
                 label="Class-C confirmed downlink timeout (seconds)"
                 tooltip="Class-C timeout (in seconds) for confirmed downlink transmissions."
                 name="classCTimeout"
                 rules={[{ required: true, message: "Please enter a Class-C confirmed downlink timeout!" }]}
               >
                 <InputNumber min={0} disabled={this.props.disabled} />
-            </Form.Item>}
+              </Form.Item>
+            )}
           </Tabs.TabPane>
           <Tabs.TabPane tab="Codec" key="5">
             <Form.Item
@@ -355,7 +344,7 @@ class DeviceProfileForm extends Component<IProps, IState> {
                           {...restField}
                           name={[name, 0]}
                           fieldKey={[name, 0]}
-                          rules={[{ required: true, message: 'Please enter a key!' }]}
+                          rules={[{ required: true, message: "Please enter a key!" }]}
                         >
                           <Input placeholder="Key" disabled={this.props.disabled} />
                         </Form.Item>
@@ -365,7 +354,7 @@ class DeviceProfileForm extends Component<IProps, IState> {
                           {...restField}
                           name={[name, 1]}
                           fieldKey={[name, 1]}
-                          rules={[{ required: true, message: 'Please enter a value!' }]}
+                          rules={[{ required: true, message: "Please enter a value!" }]}
                         >
                           <Input placeholder="Value" disabled={this.props.disabled} />
                         </Form.Item>
@@ -376,7 +365,13 @@ class DeviceProfileForm extends Component<IProps, IState> {
                     </Row>
                   ))}
                   <Form.Item>
-                    <Button disabled={this.props.disabled} type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                    <Button
+                      disabled={this.props.disabled}
+                      type="dashed"
+                      onClick={() => add()}
+                      block
+                      icon={<PlusOutlined />}
+                    >
                       Add tag
                     </Button>
                   </Form.Item>
@@ -386,7 +381,9 @@ class DeviceProfileForm extends Component<IProps, IState> {
           </Tabs.TabPane>
         </Tabs>
         <Form.Item>
-          <Button type="primary" htmlType="submit" disabled={this.props.disabled}>Submit</Button>
+          <Button type="primary" htmlType="submit" disabled={this.props.disabled}>
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/device-profiles/EditDeviceProfile.tsx

@@ -4,7 +4,13 @@ import { RouteComponentProps, Link } from "react-router-dom";
 import { Space, Breadcrumb, Card, Button, PageHeader } from "antd";
 
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
-import { DeviceProfile, GetDeviceProfileRequest, GetDeviceProfileResponse, UpdateDeviceProfileRequest, DeleteDeviceProfileRequest } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import {
+  DeviceProfile,
+  GetDeviceProfileRequest,
+  GetDeviceProfileResponse,
+  UpdateDeviceProfileRequest,
+  DeleteDeviceProfileRequest,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 
 import DeviceProfileForm from "./DeviceProfileForm";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
@@ -12,7 +18,6 @@ import SessionStore from "../../stores/SessionStore";
 import DeleteConfirm from "../../components/DeleteConfirm";
 import Admin from "../../components/Admin";
 
-
 interface IState {
   deviceProfile?: DeviceProfile;
 }
@@ -25,7 +30,6 @@ interface IProps extends RouteComponentProps<MatchParams> {
   tenant: Tenant;
 }
 
-
 class EditDeviceProfile extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -46,7 +50,7 @@ class EditDeviceProfile extends Component<IProps, IState> {
         deviceProfile: resp.getDeviceProfile(),
       });
     });
-  }
+  };
 
   onFinish = (obj: DeviceProfile) => {
     let req = new UpdateDeviceProfileRequest();
@@ -55,7 +59,7 @@ class EditDeviceProfile extends Component<IProps, IState> {
     DeviceProfileStore.update(req, () => {
       this.props.history.push(`/tenants/${this.props.tenant.getId()}/device-profiles`);
     });
-  }
+  };
 
   deleteDeviceProfile = () => {
     let req = new DeleteDeviceProfileRequest();
@@ -64,7 +68,7 @@ class EditDeviceProfile extends Component<IProps, IState> {
     DeviceProfileStore.delete(req, () => {
       this.props.history.push(`/tenants/${this.props.tenant.getId()}/device-profiles`);
     });
-  }
+  };
 
   render() {
     const dp = this.state.deviceProfile;
@@ -73,37 +77,45 @@ class EditDeviceProfile extends Component<IProps, IState> {
       return null;
     }
 
-    const disabled = !(SessionStore.isAdmin() || SessionStore.isTenantAdmin(this.props.tenant.getId()) || SessionStore.isTenantDeviceAdmin(this.props.tenant.getId()));
+    const disabled = !(
+      SessionStore.isAdmin() ||
+      SessionStore.isTenantAdmin(this.props.tenant.getId()) ||
+      SessionStore.isTenantDeviceAdmin(this.props.tenant.getId())
+    );
 
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/device-profiles`}>Device profiles</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/device-profiles`}>Device profiles</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>{dp.getName()}</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title={dp.getName()}
           subTitle={`device profile id: ${dp.getId()}`}
           extra={[
             <Admin tenantId={this.props.tenant.getId()} isDeviceAdmin>
-              <DeleteConfirm
+              <DeleteConfirm typ="device profile" confirm={dp.getName()} onConfirm={this.deleteDeviceProfile}>
-                typ="device profile"
+                <Button danger type="primary">
-                confirm={dp.getName()}
+                  Delete device profile
-                onConfirm={this.deleteDeviceProfile}
+                </Button>
-              >
-                <Button danger type="primary">Delete device profile</Button>
               </DeleteConfirm>
-            </Admin>
+            </Admin>,
           ]}
         />
         <Card>

ui/src/views/device-profiles/ListDeviceProfiles.tsx

@@ -4,7 +4,11 @@ import { Link } from "react-router-dom";
 import { Space, Breadcrumb, Button, PageHeader } from "antd";
 import { ColumnsType } from "antd/es/table";
 
-import { ListDeviceProfilesRequest, ListDeviceProfilesResponse, DeviceProfileListItem } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import {
+  ListDeviceProfilesRequest,
+  ListDeviceProfilesResponse,
+  DeviceProfileListItem,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 import { Region } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
 
@@ -13,12 +17,10 @@ import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
 import Admin from "../../components/Admin";
 
-
 interface IProps {
   tenant: Tenant;
 }
 
-
 class ListDeviceProfiles extends Component<IProps> {
   columns = (): ColumnsType<DeviceProfileListItem.AsObject> => {
     return [
@@ -97,7 +99,7 @@ class ListDeviceProfiles extends Component<IProps> {
         },
       },
     ];
-  }
+  };
 
   getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
     let req = new ListDeviceProfilesRequest();
@@ -109,35 +111,37 @@ class ListDeviceProfiles extends Component<IProps> {
       const obj = resp.toObject();
       callbackFunc(obj.totalCount, obj.resultList);
     });
-  }
+  };
 
   render() {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Device profiles</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="Device profiles"
           extra={[
             <Admin tenantId={this.props.tenant.getId()} isDeviceAdmin>
-              <Button type="primary"><Link to={`/tenants/${this.props.tenant.getId()}/device-profiles/create`}>Add device profile</Link></Button>
+              <Button type="primary">
-            </Admin>
+                <Link to={`/tenants/${this.props.tenant.getId()}/device-profiles/create`}>Add device profile</Link>
+              </Button>
+            </Admin>,
           ]}
         />
-        <DataTable
+        <DataTable columns={this.columns()} getPage={this.getPage} rowKey="id" />
-          columns={this.columns()}
-          getPage={this.getPage}
-          rowKey="id"
-        />
       </Space>
     );
   }

ui/src/views/devices/CreateDevice.tsx

@@ -6,19 +6,20 @@ import { Space, Breadcrumb, Card, PageHeader } from "antd";
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 import { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 import { CreateDeviceRequest, Device } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
-import { GetDeviceProfileRequest, GetDeviceProfileResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import {
+  GetDeviceProfileRequest,
+  GetDeviceProfileResponse,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 
 import DeviceForm from "./DeviceForm";
 import DeviceStore from "../../stores/DeviceStore";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
 
-
 interface IProps extends RouteComponentProps {
   tenant: Tenant;
   application: Application;
 }
 
-
 class CreateDevice extends Component<IProps> {
   onFinish = (obj: Device) => {
     obj.setApplicationId(this.props.application.getId());
@@ -33,13 +34,17 @@ class CreateDevice extends Component<IProps> {
       DeviceProfileStore.get(req, (resp: GetDeviceProfileResponse) => {
         let dp = resp.getDeviceProfile()!;
         if (dp.getSupportsOtaa()) {
-          this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}/keys`);
+          this.props.history.push(
+            `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}/keys`,
+          );
         } else {
-          this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}`);
+          this.props.history.push(
+            `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}`,
+          );
         }
       });
     });
-  }
+  };
 
   render() {
     let device = new Device();
@@ -48,23 +53,33 @@ class CreateDevice extends Component<IProps> {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}`}>{this.props.application.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}`}>
+                    {this.props.application.getName()}
+                  </Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Add device</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title="Add device"
         />
         <Card>

ui/src/views/devices/DeviceActivation.tsx

@@ -19,14 +19,12 @@ import AesKeyInput from "../../components/AesKeyInput";
 import DevAddrInput from "../../components/DevAddrInput";
 import DeviceStore from "../../stores/DeviceStore";
 
-
 interface FormProps {
   initialValues: DeviceActivationPb;
   device: Device;
   onFinish: (obj: DeviceActivationPb) => void;
 }
 
-
 class LW10DeviceActivationForm extends Component<FormProps> {
   formRef = React.createRef<any>();
 
@@ -44,11 +42,16 @@ class LW10DeviceActivationForm extends Component<FormProps> {
     da.setNFCntDown(v.nFCntDown);
 
     this.props.onFinish(da);
-  }
+  };
 
   render() {
     return (
-      <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish} ref={this.formRef}>
+      <Form
+        layout="vertical"
+        initialValues={this.props.initialValues.toObject()}
+        onFinish={this.onFinish}
+        ref={this.formRef}
+      >
         <DevAddrInput
           label="Device address"
           name="devAddr"
@@ -73,31 +76,26 @@ class LW10DeviceActivationForm extends Component<FormProps> {
         />
         <Row gutter={24}>
           <Col span={6}>
-            <Form.Item
+            <Form.Item label="Uplink frame-counter" name="fCntUp">
-              label="Uplink frame-counter"
-              name="fCntUp"
-            >
               <InputNumber min={0} />
             </Form.Item>
           </Col>
           <Col span={6}>
-            <Form.Item
+            <Form.Item label="Downlink frame-counter" name="nFCntDown">
-              label="Downlink frame-counter"
-              name="nFCntDown"
-            >
               <InputNumber min={0} />
             </Form.Item>
           </Col>
         </Row>
         <Form.Item>
-          <Button type="primary" htmlType="submit">(Re)activate device</Button>
+          <Button type="primary" htmlType="submit">
+            (Re)activate device
+          </Button>
         </Form.Item>
       </Form>
     );
   }
 }
 
-
 class LW11DeviceActivationForm extends Component<FormProps> {
   formRef = React.createRef<any>();
 
@@ -115,11 +113,16 @@ class LW11DeviceActivationForm extends Component<FormProps> {
     da.setNFCntDown(v.nFCntDown);
 
     this.props.onFinish(da);
-  }
+  };
 
   render() {
     return (
-      <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish} ref={this.formRef}>
+      <Form
+        layout="vertical"
+        initialValues={this.props.initialValues.toObject()}
+        onFinish={this.onFinish}
+        ref={this.formRef}
+      >
         <DevAddrInput
           label="Device address"
           name="devAddr"
@@ -158,39 +161,31 @@ class LW11DeviceActivationForm extends Component<FormProps> {
         />
         <Row gutter={24}>
           <Col span={6}>
-            <Form.Item
+            <Form.Item label="Uplink frame-counter" name="fCntUp">
-              label="Uplink frame-counter"
-              name="fCntUp"
-            >
               <InputNumber min={0} />
             </Form.Item>
           </Col>
           <Col span={6}>
-            <Form.Item
+            <Form.Item label="Downlink frame-counter (network)" name="nFCntDown">
-              label="Downlink frame-counter (network)"
-              name="nFCntDown"
-            >
               <InputNumber min={0} />
             </Form.Item>
           </Col>
           <Col span={6}>
-            <Form.Item
+            <Form.Item label="Downlink frame-counter (application)" name="aFCntDown">
-              label="Downlink frame-counter (application)"
-              name="aFCntDown"
-            >
               <InputNumber min={0} />
             </Form.Item>
           </Col>
         </Row>
         <Form.Item>
-          <Button type="primary" htmlType="submit">(Re)activate device</Button>
+          <Button type="primary" htmlType="submit">
+            (Re)activate device
+          </Button>
         </Form.Item>
       </Form>
     );
   }
 }
 
-
 interface IProps extends RouteComponentProps {
   tenant: Tenant;
   application: Application;
@@ -198,13 +193,11 @@ interface IProps extends RouteComponentProps {
   deviceProfile: DeviceProfile;
 }
 
-
 interface IState {
   deviceActivation?: DeviceActivationPb;
   deviceActivationRequested: boolean;
 }
 
-
 class DeviceActivation extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -231,9 +224,11 @@ class DeviceActivation extends Component<IProps, IState> {
     req.setDeviceActivation(obj);
 
     DeviceStore.activate(req, () => {
-        this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${this.props.device.getDevEui()}`);
+      this.props.history.push(
+        `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${this.props.device.getDevEui()}`,
+      );
     });
-  }
+  };
 
   render() {
     if (!this.state.deviceActivationRequested) {
@@ -250,8 +245,12 @@ class DeviceActivation extends Component<IProps, IState> {
 
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
-        {!lw11 && <LW10DeviceActivationForm initialValues={initialValues} device={this.props.device} onFinish={this.onFinish} /> }
+        {!lw11 && (
-        {lw11 && <LW11DeviceActivationForm initialValues={initialValues} device={this.props.device} onFinish={this.onFinish} /> }
+          <LW10DeviceActivationForm initialValues={initialValues} device={this.props.device} onFinish={this.onFinish} />
+        )}
+        {lw11 && (
+          <LW11DeviceActivationForm initialValues={initialValues} device={this.props.device} onFinish={this.onFinish} />
+        )}
       </Space>
     );
   }

ui/src/views/devices/DeviceDashboard.tsx

@@ -12,14 +12,11 @@ import {
   GetDeviceStatsRequest,
   GetDeviceStatsResponse,
 } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
-import {
+import { DeviceProfile } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
-  DeviceProfile,
-} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 
 import DeviceStore from "../../stores/DeviceStore";
 import Heatmap from "../../components/Heatmap";
 
-
 interface IProps {
   device: Device;
   deviceProfile: DeviceProfile;
@@ -32,7 +29,7 @@ interface IState {
   statsUpFreq: HeatmapStats[];
   statsUpDr?: any;
   statsGwRssi?: any;
-  statsGwSnr?: any,
+  statsGwSnr?: any;
 }
 
 interface HeatmapStats {
@@ -78,7 +75,7 @@ class DeviceDashboard extends Component<IProps, IState> {
           lineTension: number;
           pointBackgroundColor: string;
           data: number[];
-        }[],
+        }[];
       } = {
         labels: [],
         datasets: [
@@ -129,28 +126,32 @@ class DeviceDashboard extends Component<IProps, IState> {
       let statsGwRssiData: (number | null)[] = [];
       let statsGwRssi = {
         labels: statsGwRssiLabels,
-        datasets: [{
+        datasets: [
+          {
             label: "rssi (reported by gateways)",
             borderColor: "rgba(33, 150, 243, 1)",
             backgroundColor: "rgba(0, 0, 0, 0)",
             lineTension: 0,
             pointBackgroundColor: "rgba(33, 150, 243, 1)",
             data: statsGwRssiData,
-        }],
+          },
+        ],
       };
 
       let statsGwSnrLabels: string[] = [];
       let statsGwSnrData: (number | null)[] = [];
       let statsGwSnr = {
         labels: statsGwSnrLabels,
-        datasets: [{
+        datasets: [
+          {
             label: "rssi (reported by gateways)",
             borderColor: "rgba(33, 150, 243, 1)",
             backgroundColor: "rgba(0, 0, 0, 0)",
             lineTension: 0,
             pointBackgroundColor: "rgba(33, 150, 243, 1)",
             data: statsGwSnrData,
-        }],
+          },
+        ],
       };
 
       let statsUpFreq: HeatmapStats[] = [];
@@ -160,7 +161,10 @@ class DeviceDashboard extends Component<IProps, IState> {
 
         statsUpFreq.push({
           x: moment(row.getTime()!.toDate()).format("YYYY-MM-DD"),
-          y: row.getRxPacketsPerFrequencyMap().toObject().map(v => [v[0].toString(), v[1]]),
+          y: row
+            .getRxPacketsPerFrequencyMap()
+            .toObject()
+            .map(v => [v[0].toString(), v[1]]),
         });
 
         statsErrors.labels.push(moment(row.getTime()!.toDate()).format("YYYY-MM-DD"));
@@ -187,7 +191,6 @@ class DeviceDashboard extends Component<IProps, IState> {
           }
 
           statsErrorsSet[v[0]].push(v[1]);
-
         }
 
         for (const v of row.getRxPacketsPerDrMap().toObject()) {
@@ -204,7 +207,23 @@ class DeviceDashboard extends Component<IProps, IState> {
         }
       }
 
-      let backgroundColors = ['#8bc34a', '#ff5722', '#ff9800', '#ffc107', '#ffeb3b', '#cddc39', '#4caf50', '#009688', '#00bcd4', '#03a9f4', '#2196f3', '#3f51b5', '#673ab7', '#9c27b0', '#e91e63'];
+      let backgroundColors = [
+        "#8bc34a",
+        "#ff5722",
+        "#ff9800",
+        "#ffc107",
+        "#ffeb3b",
+        "#cddc39",
+        "#4caf50",
+        "#009688",
+        "#00bcd4",
+        "#03a9f4",
+        "#2196f3",
+        "#3f51b5",
+        "#673ab7",
+        "#9c27b0",
+        "#e91e63",
+      ];
       Object.entries(statsErrorsSet).forEach(([k, v]) => {
         statsErrors.datasets.push({
           label: k,
@@ -213,7 +232,23 @@ class DeviceDashboard extends Component<IProps, IState> {
         });
       });
 
-      backgroundColors = ['#8bc34a', '#ff5722', '#ff9800', '#ffc107', '#ffeb3b', '#cddc39', '#4caf50', '#009688', '#00bcd4', '#03a9f4', '#2196f3', '#3f51b5', '#673ab7', '#9c27b0', '#e91e63'];
+      backgroundColors = [
+        "#8bc34a",
+        "#ff5722",
+        "#ff9800",
+        "#ffc107",
+        "#ffeb3b",
+        "#cddc39",
+        "#4caf50",
+        "#009688",
+        "#00bcd4",
+        "#03a9f4",
+        "#2196f3",
+        "#3f51b5",
+        "#673ab7",
+        "#9c27b0",
+        "#e91e63",
+      ];
       Object.entries(statsUpDrSet).forEach(([k, v]) => {
         statsUpDr.datasets.push({
           label: k,
@@ -231,8 +266,7 @@ class DeviceDashboard extends Component<IProps, IState> {
         statsGwSnr: statsGwSnr,
       });
     });
-  }
+  };
-
 
   render() {
     const animation: false = false;
@@ -292,7 +326,13 @@ class DeviceDashboard extends Component<IProps, IState> {
         <Card>
           <Descriptions>
             <Descriptions.Item label="Last seen">{lastSeenAt}</Descriptions.Item>
-          <Descriptions.Item label="Device profile"><Link to={`/tenants/${this.props.deviceProfile.getTenantId()}/device-profiles/${this.props.deviceProfile.getId()}/edit`}>{this.props.deviceProfile.getName()}</Link></Descriptions.Item>
+            <Descriptions.Item label="Device profile">
+              <Link
+                to={`/tenants/${this.props.deviceProfile.getTenantId()}/device-profiles/${this.props.deviceProfile.getId()}/edit`}
+              >
+                {this.props.deviceProfile.getName()}
+              </Link>
+            </Descriptions.Item>
             <Descriptions.Item label="Enabled">{this.props.device.getIsDisabled() ? "no" : "yes"}</Descriptions.Item>
             <Descriptions.Item label="Description">{this.props.device.getDescription()}</Descriptions.Item>
           </Descriptions>

ui/src/views/devices/DeviceEvents.tsx

@@ -6,14 +6,13 @@ import { StreamDeviceEventsRequest, LogItem } from "@chirpstack/chirpstack-api-g
 import InternalStore from "../../stores/InternalStore";
 import LogTable from "../../components/LogTable";
 
-
 interface IProps {
   device: Device;
 }
 
 interface IState {
   events: LogItem[];
-  cancelFunc?: () => void,
+  cancelFunc?: () => void;
 }
 
 class DeviceEvents extends Component<IProps, IState> {
@@ -44,7 +43,7 @@ class DeviceEvents extends Component<IProps, IState> {
     this.setState({
       cancelFunc: cancelFunc,
     });
-  }
+  };
 
   onMessage = (l: LogItem) => {
     let events = this.state.events;
@@ -55,10 +54,10 @@ class DeviceEvents extends Component<IProps, IState> {
         events: events,
       });
     }
-  }
+  };
 
   render() {
-    return(<LogTable logs={this.state.events} />);
+    return <LogTable logs={this.state.events} />;
   }
 }
 

ui/src/views/devices/DeviceForm.tsx

@@ -1,18 +1,22 @@
 import React, { Component } from "react";
 
 import { Form, Input, Row, Col, Button, Tabs } from "antd";
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 import { Device } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
-import { ListDeviceProfilesRequest, ListDeviceProfilesResponse, GetDeviceProfileRequest, GetDeviceProfileResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import {
+  ListDeviceProfilesRequest,
+  ListDeviceProfilesResponse,
+  GetDeviceProfileRequest,
+  GetDeviceProfileResponse,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 
 import EuiInput from "../../components/EuiInput";
 import { OptionsCallbackFunc, OptionCallbackFunc } from "../../components/Autocomplete";
 import AutocompleteInput from "../../components/AutocompleteInput";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
 
-
 interface IProps {
   tenant: Tenant;
   initialValues: Device;
@@ -20,7 +24,6 @@ interface IProps {
   update?: boolean;
 }
 
-
 class DeviceForm extends Component<IProps> {
   formRef = React.createRef<any>();
 
@@ -45,7 +48,7 @@ class DeviceForm extends Component<IProps> {
     }
 
     this.props.onFinish(d);
-  }
+  };
 
   getDeviceProfileOptions = (search: string, fn: OptionsCallbackFunc) => {
     let req = new ListDeviceProfilesRequest();
@@ -54,10 +57,12 @@ class DeviceForm extends Component<IProps> {
     req.setLimit(10);
 
     DeviceProfileStore.list(req, (resp: ListDeviceProfilesResponse) => {
-      const options = resp.getResultList().map((o, i) => {return {label: o.getName(), value: o.getId()}});
+      const options = resp.getResultList().map((o, i) => {
+        return { label: o.getName(), value: o.getId() };
+      });
       fn(options);
     });
-  }
+  };
 
   getDeviceProfileOption = (id: string, fn: OptionCallbackFunc) => {
     let req = new GetDeviceProfileRequest();
@@ -69,24 +74,22 @@ class DeviceForm extends Component<IProps> {
         fn({ label: dp.getName(), value: dp.getId() });
       }
     });
-  }
+  };
 
   render() {
     return (
-      <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish} ref={this.formRef}>
+      <Form
+        layout="vertical"
+        initialValues={this.props.initialValues.toObject()}
+        onFinish={this.onFinish}
+        ref={this.formRef}
+      >
         <Tabs>
           <Tabs.TabPane tab="Device" key="1">
-            <Form.Item
+            <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
-              label="Name"
-              name="name"
-              rules={[{required: true, message: "Please enter a name!"}]}
-            >
               <Input />
             </Form.Item>
-            <Form.Item
+            <Form.Item label="Description" name="description">
-              label="Description"
-              name="description"
-            >
               <Input.TextArea />
             </Form.Item>
             <EuiInput
@@ -117,7 +120,7 @@ class DeviceForm extends Component<IProps> {
                           {...restField}
                           name={[name, 0]}
                           fieldKey={[name, 0]}
-                          rules={[{ required: true, message: 'Please enter a key!' }]}
+                          rules={[{ required: true, message: "Please enter a key!" }]}
                         >
                           <Input placeholder="Key" />
                         </Form.Item>
@@ -127,7 +130,7 @@ class DeviceForm extends Component<IProps> {
                           {...restField}
                           name={[name, 1]}
                           fieldKey={[name, 1]}
-                          rules={[{ required: true, message: 'Please enter a value!' }]}
+                          rules={[{ required: true, message: "Please enter a value!" }]}
                         >
                           <Input placeholder="Value" />
                         </Form.Item>
@@ -157,7 +160,7 @@ class DeviceForm extends Component<IProps> {
                           {...restField}
                           name={[name, 0]}
                           fieldKey={[name, 0]}
-                          rules={[{ required: true, message: 'Please enter a key!' }]}
+                          rules={[{ required: true, message: "Please enter a key!" }]}
                         >
                           <Input placeholder="Key" />
                         </Form.Item>
@@ -167,7 +170,7 @@ class DeviceForm extends Component<IProps> {
                           {...restField}
                           name={[name, 1]}
                           fieldKey={[name, 1]}
-                          rules={[{ required: true, message: 'Please enter a value!' }]}
+                          rules={[{ required: true, message: "Please enter a value!" }]}
                         >
                           <Input placeholder="Value" />
                         </Form.Item>
@@ -188,7 +191,9 @@ class DeviceForm extends Component<IProps> {
           </Tabs.TabPane>
         </Tabs>
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );

ui/src/views/devices/DeviceFrames.tsx

@@ -6,14 +6,13 @@ import { StreamDeviceFramesRequest, LogItem } from "@chirpstack/chirpstack-api-g
 import InternalStore from "../../stores/InternalStore";
 import LogTable from "../../components/LogTable";
 
-
 interface IProps {
   device: Device;
 }
 
 interface IState {
   frames: LogItem[];
-  cancelFunc?: () => void,
+  cancelFunc?: () => void;
 }
 
 class DeviceFrames extends Component<IProps, IState> {
@@ -44,7 +43,7 @@ class DeviceFrames extends Component<IProps, IState> {
     this.setState({
       cancelFunc: cancelFunc,
     });
-  }
+  };
 
   onMessage = (l: LogItem) => {
     let frames = this.state.frames;
@@ -55,10 +54,10 @@ class DeviceFrames extends Component<IProps, IState> {
         frames: frames,
       });
     }
-  }
+  };
 
   render() {
-    return(<LogTable logs={this.state.frames} />);
+    return <LogTable logs={this.state.frames} />;
   }
 }
 

ui/src/views/devices/DeviceLayout.tsx

@@ -5,8 +5,17 @@ import { Space, Breadcrumb, Card, Button, PageHeader, Menu } from "antd";
 
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 import { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-import { DeviceProfile, GetDeviceProfileRequest, GetDeviceProfileResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import {
-import { Device, GetDeviceRequest, GetDeviceResponse, DeleteDeviceRequest } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
+  DeviceProfile,
+  GetDeviceProfileRequest,
+  GetDeviceProfileResponse,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import {
+  Device,
+  GetDeviceRequest,
+  GetDeviceResponse,
+  DeleteDeviceRequest,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
 
 import DeviceStore from "../../stores/DeviceStore";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
@@ -20,7 +29,6 @@ import DeviceEvents from "./DeviceEvents";
 import DeviceQueue from "./DeviceQueue";
 import DeviceActivation from "./DeviceActivation";
 
-
 interface MatchParams {
   devEui: string;
 }
@@ -36,7 +44,6 @@ interface IState {
   lastSeenAt?: Date;
 }
 
-
 class DeviceLayout extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -52,9 +59,12 @@ class DeviceLayout extends Component<IProps, IState> {
     req.setDevEui(this.props.match.params.devEui);
 
     DeviceStore.get(req, (resp: GetDeviceResponse) => {
-      this.setState({
+      this.setState(
+        {
           device: resp.getDevice(),
-      }, cb);
+        },
+        cb,
+      );
 
       if (resp.getLastSeenAt() !== undefined) {
         this.setState({
@@ -62,7 +72,7 @@ class DeviceLayout extends Component<IProps, IState> {
         });
       }
     });
-  }
+  };
 
   getDeviceProfile = () => {
     let req = new GetDeviceProfileRequest();
@@ -73,7 +83,7 @@ class DeviceLayout extends Component<IProps, IState> {
         deviceProfile: resp.getDeviceProfile(),
       });
     });
-  }
+  };
 
   deleteDevice = () => {
     let req = new DeleteDeviceRequest();
@@ -82,7 +92,7 @@ class DeviceLayout extends Component<IProps, IState> {
     DeviceStore.delete(req, () => {
       this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}`);
     });
-  }
+  };
 
   render() {
     const device = this.state.device;
@@ -119,56 +129,132 @@ class DeviceLayout extends Component<IProps, IState> {
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/applications`}>Applications</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}`}>{this.props.application.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}`}>
+                    {this.props.application.getName()}
+                  </Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}`}>Devices</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}`}>
+                    Devices
+                  </Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>{device.getName()}</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
           title={device.getName()}
           subTitle={`device eui: ${device.getDevEui()}`}
           extra={[
-            <DeleteConfirm
+            <DeleteConfirm typ="device" confirm={device.getName()} onConfirm={this.deleteDevice}>
-              typ="device"
+              <Button danger type="primary">
-              confirm={device.getName()}
+                Delete device
-              onConfirm={this.deleteDevice}
+              </Button>
-            >
+            </DeleteConfirm>,
-              <Button danger type="primary">Delete device</Button>
-            </DeleteConfirm>
           ]}
         />
         <Card>
           <Menu mode="horizontal" selectedKeys={[tab]} style={{ marginBottom: 24 }}>
-              <Menu.Item key="dashboard"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}`}>Dashboard</Link></Menu.Item>
+            <Menu.Item key="dashboard">
-              <Menu.Item key="edit"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/edit`}>Configuration</Link></Menu.Item>
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}`}>
-              <Menu.Item key="keys" disabled={!dp.getSupportsOtaa()}><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/keys`}>OTAA keys</Link></Menu.Item>
+                Dashboard
-              <Menu.Item key="activation"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/activation`}>Activation</Link></Menu.Item>
+              </Link>
-              <Menu.Item key="queue"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/queue`}>Queue</Link></Menu.Item>
+            </Menu.Item>
-              <Menu.Item key="events"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/events`}>Events</Link></Menu.Item>
+            <Menu.Item key="edit">
-              <Menu.Item key="frames"><Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/frames`}>LoRaWAN frames</Link></Menu.Item>
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/edit`}>
+                Configuration
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="keys" disabled={!dp.getSupportsOtaa()}>
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/keys`}>
+                OTAA keys
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="activation">
+              <Link
+                to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/activation`}
+              >
+                Activation
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="queue">
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/queue`}>
+                Queue
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="events">
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/events`}>
+                Events
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="frames">
+              <Link to={`/tenants/${tenant.getId()}/applications/${app.getId()}/devices/${device.getDevEui()}/frames`}>
+                LoRaWAN frames
+              </Link>
+            </Menu.Item>
           </Menu>
           <Switch>
-              <Route exact path={this.props.match.path} render={props => <DeviceDashboard device={device} lastSeenAt={this.state.lastSeenAt} deviceProfile={dp} {...props} />} />
+            <Route
-              <Route exact path={`${this.props.match.path}/edit`} render={props => <EditDevice device={device} application={app} tenant={tenant} {...props} />} />
+              exact
-              <Route exact path={`${this.props.match.path}/keys`} render={props => <SetDeviceKeys device={device} application={app} tenant={tenant} deviceProfile={dp} {...props} />} />
+              path={this.props.match.path}
-              <Route exact path={`${this.props.match.path}/frames`} render={props => <DeviceFrames device={device} {...props} /> } />
+              render={props => (
-              <Route exact path={`${this.props.match.path}/events`} render={props => <DeviceEvents device={device} {...props} /> } />
+                <DeviceDashboard device={device} lastSeenAt={this.state.lastSeenAt} deviceProfile={dp} {...props} />
-              <Route exact path={`${this.props.match.path}/queue`} render={props => <DeviceQueue device={device} {...props} /> } />
+              )}
-              <Route exact path={`${this.props.match.path}/activation`} render={props => <DeviceActivation device={device} deviceProfile={dp} tenant={tenant} application={app} {...props} /> } />
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/edit`}
+              render={props => <EditDevice device={device} application={app} tenant={tenant} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/keys`}
+              render={props => (
+                <SetDeviceKeys device={device} application={app} tenant={tenant} deviceProfile={dp} {...props} />
+              )}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/frames`}
+              render={props => <DeviceFrames device={device} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/events`}
+              render={props => <DeviceEvents device={device} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/queue`}
+              render={props => <DeviceQueue device={device} {...props} />}
+            />
+            <Route
+              exact
+              path={`${this.props.match.path}/activation`}
+              render={props => (
+                <DeviceActivation device={device} deviceProfile={dp} tenant={tenant} application={app} {...props} />
+              )}
+            />
           </Switch>
         </Card>
       </Space>

ui/src/views/devices/DeviceQueue.tsx

@@ -13,13 +13,13 @@ import {
   GetDeviceQueueItemsRequest,
   GetDeviceQueueItemsResponse,
   FlushDeviceQueueRequest,
-  DeviceQueueItem } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
+  DeviceQueueItem,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
 
 import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
 import DeviceStore from "../../stores/DeviceStore";
 import CodeEditor from "../../components/CodeEditor";
 
-
 interface IProps {
   device: Device;
 }
@@ -28,7 +28,6 @@ interface IState {
   refreshCounter: number;
 }
 
-
 class DeviceQueue extends Component<IProps, IState> {
   formRef = React.createRef<any>();
 
@@ -97,11 +96,11 @@ class DeviceQueue extends Component<IProps, IState> {
         dataIndex: "data",
         key: "data",
         render: (text, record) => {
-          return Buffer.from(record.data as string, 'base64').toString('hex');
+          return Buffer.from(record.data as string, "base64").toString("hex");
         },
       },
-    ]
+    ];
-  }
+  };
 
   getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
     let req = new GetDeviceQueueItemsRequest();
@@ -111,13 +110,13 @@ class DeviceQueue extends Component<IProps, IState> {
       const obj = resp.toObject();
       callbackFunc(obj.totalCount, obj.resultList);
     });
-  }
+  };
 
   refreshQueue = () => {
     this.setState({
       refreshCounter: this.state.refreshCounter + 1,
     });
-  }
+  };
 
   flushQueue = () => {
     let req = new FlushDeviceQueueRequest();
@@ -125,7 +124,7 @@ class DeviceQueue extends Component<IProps, IState> {
     DeviceStore.flushQueue(req, () => {
       this.refreshQueue();
     });
-  }
+  };
 
   onEnqueue = (values: any) => {
     let req = new EnqueueDeviceQueueItemRequest();
@@ -136,11 +135,11 @@ class DeviceQueue extends Component<IProps, IState> {
     item.setConfirmed(values.confirmed);
 
     if (values.hex !== undefined) {
-      item.setData(Buffer.from(values.hex, 'hex'));
+      item.setData(Buffer.from(values.hex, "hex"));
     }
 
     if (values.base64 !== undefined) {
-      item.setData(Buffer.from(values.base64, 'base64'));
+      item.setData(Buffer.from(values.base64, "base64"));
     }
 
     if (values.json !== undefined) {
@@ -162,11 +161,11 @@ class DeviceQueue extends Component<IProps, IState> {
 
     req.setItem(item);
 
-    DeviceStore.enqueue(req, (_) => {
+    DeviceStore.enqueue(req, _ => {
       this.formRef.current.resetFields();
       this.refreshQueue();
     });
-  }
+  };
 
   render() {
     return (
@@ -195,24 +194,20 @@ class DeviceQueue extends Component<IProps, IState> {
                 </Form.Item>
               </Tabs.TabPane>
               <Tabs.TabPane tab="JSON" key="3">
-                <CodeEditor
+                <CodeEditor name="json" value="{}" formRef={this.formRef} />
-                  name="json" 
-                  value="{}"
-                  formRef={this.formRef}
-                />
               </Tabs.TabPane>
             </Tabs>
-            <Button type="primary" htmlType="submit">Enqueue</Button>
+            <Button type="primary" htmlType="submit">
+              Enqueue
+            </Button>
           </Form>
         </Card>
         <Row justify="end">
           <Space direction="horizontal" size="large">
-            <Button icon={<RedoOutlined />} onClick={this.refreshQueue}>Reload</Button>
+            <Button icon={<RedoOutlined />} onClick={this.refreshQueue}>
-            <Popconfirm
+              Reload
-              title="Are you sure you want to flush the queue?"
+            </Button>
-              placement="left"
+            <Popconfirm title="Are you sure you want to flush the queue?" placement="left" onConfirm={this.flushQueue}>
-              onConfirm={this.flushQueue}
-            >
               <Button icon={<DeleteOutlined />}>Flush queue</Button>
             </Popconfirm>
           </Space>

ui/src/views/devices/EditDevice.tsx

@@ -14,21 +14,20 @@ interface IProps extends RouteComponentProps {
   device: Device;
 }
 
-
 class EditDevice extends Component<IProps> {
   onFinish = (obj: Device) => {
     let req = new UpdateDeviceRequest();
     req.setDevice(obj);
 
     DeviceStore.update(req, () => {
-      this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}`);
+      this.props.history.push(
+        `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}`,
+      );
     });
-  }
+  };
 
   render() {
-    return(
+    return <DeviceForm initialValues={this.props.device} onFinish={this.onFinish} tenant={this.props.tenant} update />;
-      <DeviceForm initialValues={this.props.device} onFinish={this.onFinish} tenant={this.props.tenant} update />
-    );
   }
 }
 

ui/src/views/devices/ListDevices.tsx

@@ -5,10 +5,20 @@ import moment from "moment";
 import { Space, Button, Dropdown, Menu, Modal, Select } from "antd";
 import { ColumnsType } from "antd/es/table";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlug, faBatteryFull, faBatteryQuarter, faBatteryHalf, faBatteryThreeQuarters } from '@fortawesome/free-solid-svg-icons'
+import {
+  faPlug,
+  faBatteryFull,
+  faBatteryQuarter,
+  faBatteryHalf,
+  faBatteryThreeQuarters,
+} from "@fortawesome/free-solid-svg-icons";
 
 import { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
-import { ListDevicesRequest, ListDevicesResponse, DeviceListItem } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
+import {
+  ListDevicesRequest,
+  ListDevicesResponse,
+  DeviceListItem,
+} from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
 import {
   ListMulticastGroupsRequest,
   ListMulticastGroupsResponse,
@@ -21,20 +31,17 @@ import DeviceStore from "../../stores/DeviceStore";
 import MulticastGroupStore from "../../stores/MulticastGroupStore";
 import Admin from "../../components/Admin";
 
-
 interface IProps {
   application: Application;
 }
 
-
 interface IState {
   selectedRowIds: string[];
   multicastGroups: MulticastGroupListItem[];
   mgModalVisible: boolean;
-  mgSelected: string,
+  mgSelected: string;
 }
 
-
 class ListDevices extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -80,7 +87,13 @@ class ListDevices extends Component<IProps, IState> {
         key: "devEui",
         width: 250,
         render: (text, record) => (
-          <Link to={`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/devices/${record.devEui}`}>{text}</Link>
+          <Link
+            to={`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/devices/${
+              record.devEui
+            }`}
+          >
+            {text}
+          </Link>
         ),
       },
       {
@@ -93,7 +106,9 @@ class ListDevices extends Component<IProps, IState> {
         dataIndex: "deviceProfileName",
         key: "deviceProfileName",
         render: (text, record) => (
-           <Link to={`/tenants/${this.props.application.getTenantId()}/device-profiles/${record.deviceProfileId}/edit`}>{text}</Link>
+          <Link to={`/tenants/${this.props.application.getTenantId()}/device-profiles/${record.deviceProfileId}/edit`}>
+            {text}
+          </Link>
         ),
       },
       {
@@ -119,7 +134,7 @@ class ListDevices extends Component<IProps, IState> {
         },
       },
     ];
-  }
+  };
 
   getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
     let req = new ListDevicesRequest();
@@ -131,31 +146,31 @@ class ListDevices extends Component<IProps, IState> {
       const obj = resp.toObject();
       callbackFunc(obj.totalCount, obj.resultList);
     });
-  }
+  };
 
   onRowsSelectChange = (ids: string[]) => {
     this.setState({
       selectedRowIds: ids,
     });
-  }
+  };
 
   showMgModal = () => {
     this.setState({
       mgModalVisible: true,
     });
-  }
+  };
 
   hideMgModal = () => {
     this.setState({
       mgModalVisible: false,
     });
-  }
+  };
 
   onMgSelected = (value: string) => {
     this.setState({
       mgSelected: value,
     });
-  }
+  };
 
   handleMgModalOk = () => {
     for (let devEui of this.state.selectedRowIds) {
@@ -169,7 +184,7 @@ class ListDevices extends Component<IProps, IState> {
     this.setState({
       mgModalVisible: false,
     });
-  }
+  };
 
   render() {
     const menu = (
@@ -178,11 +193,19 @@ class ListDevices extends Component<IProps, IState> {
       </Menu>
     );
 
-    const mgOptions = this.state.multicastGroups.map((mg, i) => <Select.Option value={mg.getId()}>{mg.getName()}</Select.Option>);
+    const mgOptions = this.state.multicastGroups.map((mg, i) => (
+      <Select.Option value={mg.getId()}>{mg.getName()}</Select.Option>
+    ));
 
     return (
       <Space direction="vertical" size="large" style={{ width: "100%" }}>
-        <Modal title="Add selected devices to multicast-group" visible={this.state.mgModalVisible} onOk={this.handleMgModalOk} onCancel={this.hideMgModal} okButtonProps={{disabled: this.state.mgSelected === ""}}>
+        <Modal
+          title="Add selected devices to multicast-group"
+          visible={this.state.mgModalVisible}
+          onOk={this.handleMgModalOk}
+          onCancel={this.hideMgModal}
+          okButtonProps={{ disabled: this.state.mgSelected === "" }}
+        >
           <Space direction="vertical" size="large" style={{ width: "100%" }}>
             <Select style={{ width: "100%" }} onChange={this.onMgSelected} placeholder="Select Multicast-group">
               {mgOptions}
@@ -191,8 +214,21 @@ class ListDevices extends Component<IProps, IState> {
         </Modal>
         <Admin tenantId={this.props.application.getTenantId()} isDeviceAdmin>
           <Space direction="horizontal" style={{ float: "right" }}>
-              <Button type="primary"><Link to={`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/devices/create`}>Add device</Link></Button>
+            <Button type="primary">
-              <Dropdown placement="bottomRight" overlay={menu} trigger={['click']} disabled={this.state.selectedRowIds.length === 0}><Button>Selected devices</Button></Dropdown>
+              <Link
+                to={`/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/devices/create`}
+              >
+                Add device
+              </Link>
+            </Button>
+            <Dropdown
+              placement="bottomRight"
+              overlay={menu}
+              trigger={["click"]}
+              disabled={this.state.selectedRowIds.length === 0}
+            >
+              <Button>Selected devices</Button>
+            </Dropdown>
           </Space>
         </Admin>
         <DataTable

ui/src/views/devices/SetDeviceKeys.tsx

@@ -20,13 +20,11 @@ import { MacVersion } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb
 import AesKeyInput from "../../components/AesKeyInput";
 import DeviceStore from "../../stores/DeviceStore";
 
-
 interface FormProps {
   initialValues: DeviceKeys;
   onFinish: (obj: DeviceKeys) => void;
 }
 
-
 class LW10DeviceKeysForm extends Component<FormProps> {
   formRef = React.createRef<any>();
 
@@ -40,11 +38,16 @@ class LW10DeviceKeysForm extends Component<FormProps> {
     dk.setNwkKey(v.nwkKey);
 
     this.props.onFinish(dk);
-  }
+  };
 
   render() {
     return (
-      <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish} ref={this.formRef}>
+      <Form
+        layout="vertical"
+        initialValues={this.props.initialValues.toObject()}
+        onFinish={this.onFinish}
+        ref={this.formRef}
+      >
         <AesKeyInput
           label="Application key"
           name="nwkKey"
@@ -54,14 +57,15 @@ class LW10DeviceKeysForm extends Component<FormProps> {
           required
         />
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );
   }
 }
 
-
 class LW11DeviceKeysForm extends Component<FormProps> {
   formRef = React.createRef<any>();
 
@@ -74,11 +78,16 @@ class LW11DeviceKeysForm extends Component<FormProps> {
     dk.setNwkKey(v.nwkKey);
 
     this.props.onFinish(dk);
-  }
+  };
 
   render() {
     return (
-      <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish} ref={this.formRef}>
+      <Form
+        layout="vertical"
+        initialValues={this.props.initialValues.toObject()}
+        onFinish={this.onFinish}
+        ref={this.formRef}
+      >
         <AesKeyInput
           label="Application key"
           tooltip="For LoRaWAN 1.1 devices. In case your device does not support LoRaWAN 1.1, update the device-profile first."
@@ -96,14 +105,15 @@ class LW11DeviceKeysForm extends Component<FormProps> {
           required
         />
         <Form.Item>
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
         </Form.Item>
       </Form>
     );
   }
 }
 
-
 interface IProps extends RouteComponentProps {
   tenant: Tenant;
   application: Application;
@@ -144,7 +154,7 @@ class SetDeviceKeys extends Component<IProps, IState> {
         });
       }
     });
-  }
+  };
 
   onFinish = (obj: DeviceKeys) => {
     if (this.state.deviceKeys) {
@@ -153,9 +163,10 @@ class SetDeviceKeys extends Component<IProps, IState> {
       req.setDeviceKeys(obj);
 
       DeviceStore.updateKeys(req, () => {
-        this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${this.props.device.getDevEui()}`);
+        this.props.history.push(
+          `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${this.props.device.getDevEui()}`,
+        );
       });
-
     } else {
       // this is a create
       let req = new CreateDeviceKeysRequest();
@@ -163,16 +174,18 @@ class SetDeviceKeys extends Component<IProps, IState> {
       req.setDeviceKeys(obj);
 
       DeviceStore.createKeys(req, () => {
-        this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${this.props.device.getDevEui()}`);
+        this.props.history.push(
+          `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${this.props.device.getDevEui()}`,
+        );
       });
     }
-  }
+  };
 
   flushDevNonces = () => {
     let req = new FlushDevNoncesRequest();
     req.setDevEui(this.props.device.getDevEui());
     DeviceStore.flushDevNonces(req, () => {});
-  }
+  };
 
   render() {
     if (!this.state.deviceKeysRequested) {
@@ -189,7 +202,8 @@ class SetDeviceKeys extends Component<IProps, IState> {
 
     return (
       <Space direction="vertical" style={{ width: "100%" }} size="large">
-        {this.state.deviceKeys && <div style={{float: "right"}}>
+        {this.state.deviceKeys && (
+          <div style={{ float: "right" }}>
             <Popconfirm
               placement="left"
               title="Are you sure you want to flush all device-nonces that have been used during previous OTAA activations?"
@@ -197,7 +211,8 @@ class SetDeviceKeys extends Component<IProps, IState> {
             >
               <Button>Flush OTAA device nonces</Button>
             </Popconfirm>
-        </div>}
+          </div>
+        )}
         {!lw11 && <LW10DeviceKeysForm initialValues={initialValues} onFinish={this.onFinish} />}
         {lw11 && <LW11DeviceKeysForm initialValues={initialValues} onFinish={this.onFinish} />}
       </Space>

ui/src/views/gateways/CreateGateway.tsx

@@ -9,12 +9,10 @@ import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 import GatewayForm from "./GatewayForm";
 import GatewayStore from "../../stores/GatewayStore";
 
-
 interface IProps extends RouteComponentProps {
   tenant: Tenant;
 }
 
-
 class CreateGateway extends Component<IProps> {
   onFinish = (obj: Gateway) => {
     obj.setTenantId(this.props.tenant.getId());
@@ -25,7 +23,7 @@ class CreateGateway extends Component<IProps> {
     GatewayStore.create(req, () => {
       this.props.history.push(`/tenants/${this.props.tenant.getId()}/gateways/${obj.getGatewayId()}`);
     });
-  }
+  };
 
   render() {
     const gateway = new Gateway();
@@ -34,20 +32,26 @@ class CreateGateway extends Component<IProps> {
       <Space direction="vertical" style={{ width: "100%" }} size="large">
         <PageHeader
           title="Add gateway"
-          breadcrumbRender={() => <Breadcrumb>
+          breadcrumbRender={() => (
+            <Breadcrumb>
               <Breadcrumb.Item>
                 <span>Tenants</span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}`}>{this.props.tenant.getName()}</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
-                <span><Link to={`/tenants/${this.props.tenant.getId()}/gateways`}>Gateways</Link></span>
+                <span>
+                  <Link to={`/tenants/${this.props.tenant.getId()}/gateways`}>Gateways</Link>
+                </span>
               </Breadcrumb.Item>
               <Breadcrumb.Item>
                 <span>Add</span>
               </Breadcrumb.Item>
-            </Breadcrumb>}
+            </Breadcrumb>
+          )}
         />
         <Card>
           <GatewayForm initialValues={gateway} onFinish={this.onFinish} />