ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-05-05 18:38:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: Migrate from create-react-app to vite (#459)

Browse Source
This commit is contained in:
Bernd Storath 2024-07-16 15:10:19 +02:00 committed by GitHub
parent 3777de706d
commit 4f0d2126d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
163 changed files with 2007 additions and 10190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/.env
View File

@ -1 +0,0 @@
EXTEND_ESLINT=true

13
ui/.eslintrc.cjs Normal file
View File

@ -0,0 +1,13 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parser: "@typescript-eslint/parser",
plugins: ["react-refresh"],
rules: {
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/no-unused-vars": "off",
},
};

14
ui/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" href="/icon.png" />
<title>ChirpStack LoRaWAN&reg; Network-Server</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

94
ui/package.json
View File

@ -2,73 +2,61 @@
"name": "chirpstack-ui", "name": "chirpstack-ui",
"version": "4.9.0-test.3", "version": "4.9.0-test.3",
"private": true, "private": true,
"type": "module",
"scripts": {
"start": "vite",
"build": "tsc -b && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": { "dependencies": {
"@ant-design/colors": "^7.0.0", "@ant-design/colors": "^7.1.0",
"@ant-design/pro-layout": "^7.17.6", "@ant-design/icons": "^5.3.7",
"@ant-design/pro-layout": "^7.19.8",
"@chirpstack/chirpstack-api-grpc-web": "file:../api/grpc-web", "@chirpstack/chirpstack-api-grpc-web": "file:../api/grpc-web",
"@fortawesome/fontawesome-free": "^6.5.1", "@fortawesome/fontawesome-free": "^6.5.2",
"@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.2",
"@testing-library/jest-dom": "^6.1.5", "antd": "^5.19.1",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.1.2",
"@types/jest": "^29.5.11",
"@types/leaflet": "^1.9.8",
"@types/leaflet.awesome-markers": "^2.0.28",
"@types/node": "^20.10.4",
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"antd": "^5.12.1",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"chart.js": "^4.4.1", "chart.js": "^4.4.3",
"chartjs-adapter-moment": "^1.0.1", "chartjs-adapter-moment": "^1.0.1",
"chartjs-chart-matrix": "^2.0.1", "chartjs-chart-matrix": "^2.0.1",
"codemirror": "5.65.3", "codemirror": "^5.65.16",
"events": "^3.3.0",
"google-palette": "^1.1.1", "google-palette": "^1.1.1",
"history": "^5.3.0", "history": "^5.3.0",
"js-file-download": "^0.4.12", "js-file-download": "^0.4.12",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"leaflet.awesome-markers": "^2.0.5", "leaflet.awesome-markers": "^2.0.5",
"moment": "^2.29.4", "moment": "^2.30.1",
"react": "^18.2.0", "react": "^18.3.1",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
"react-codemirror2": "^7.3.0", "react-codemirror2": "^8.0.0",
"react-dom": "^18.2.0", "react-dom": "^18.3.1",
"react-json-tree": "0.18.0", "react-json-tree": "^0.19.0",
"react-leaflet": "^4.2.1", "react-leaflet": "^4.2.1",
"react-markdown": "^9.0.1", "react-markdown": "^9.0.1",
"react-router-dom": "^6.20.1", "react-router-dom": "^6.24.1",
"react-scripts": "5.0.1", "web-vitals": "^4.2.1"
"typescript": "^5.1.3",
"web-vitals": "^3.5.0"
}, },
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:8080/",
"devDependencies": { "devDependencies": {
"prettier": "^3.0.0" "@testing-library/jest-dom": "^6.4.6",
"@types/codemirror": "^5.60.15",
"@types/events": "^3.0.3",
"@types/leaflet": "^1.9.12",
"@types/leaflet.awesome-markers": "^2.0.28",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.13.1",
"@typescript-eslint/parser": "^7.13.1",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"prettier": "^3.3.2",
"typescript": "^5.2.2",
"vite": "^5.3.1"
} }
} }

14
ui/public/index.html
View File

@ -1,14 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icon.png" />
<title>ChirpStack LoRaWAN&reg; Network-Server</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

11
ui/src/App.tsx
View File

@ -1,9 +1,11 @@
import type { ReactElement } from "react";
import React, { useState } from "react"; import React, { useState } from "react";
import type { RouterProps } from "react-router-dom";
import { Router, Routes, Route } from "react-router-dom"; import { Router, Routes, Route } from "react-router-dom";
import { Layout } from "antd"; import { Layout } from "antd";
import { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb"; import type { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
import Header from "./components/Header"; import Header from "./components/Header";
import Menu from "./components/Menu"; import Menu from "./components/Menu";
@ -42,7 +44,12 @@ import SessionStore from "./stores/SessionStore";
import history from "./history"; import history from "./history";
const CustomRouter = ({ history, ...props }: any) => { interface IProps extends Omit<RouterProps, "location" | "navigationType" | "navigator"> {
history: typeof history;
children: (ReactElement | undefined)[];
}
const CustomRouter = ({ history, ...props }: IProps) => {
const [state, setState] = useState({ const [state, setState] = useState({
action: history.action, action: history.action,
location: history.location, location: history.location,

3
ui/src/components/Admin.tsx
View File

@ -1,4 +1,5 @@
import React, { PropsWithChildren, useState, useEffect } from "react"; import type { PropsWithChildren } from "react";
import { useState, useEffect } from "react";
import SessionStore from "../stores/SessionStore"; import SessionStore from "../stores/SessionStore";

8
ui/src/components/AesKeyInput.tsx
View File

@ -36,7 +36,7 @@ function AesKeyInput(props: IProps) {
}; };
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let v = e.target.value; const v = e.target.value;
const match = v.match(/[A-Fa-f0-9]/g); const match = v.match(/[A-Fa-f0-9]/g);
let value = ""; let value = "";
@ -68,11 +68,11 @@ function AesKeyInput(props: IProps) {
}; };
const generateRandom = () => { const generateRandom = () => {
let cryptoObj = window.crypto || window.Crypto; const cryptoObj = window.crypto || window.Crypto;
let b = new Uint8Array(16); const b = new Uint8Array(16);
cryptoObj.getRandomValues(b); cryptoObj.getRandomValues(b);
let key = Buffer.from(b).toString("hex"); const key = Buffer.from(b).toString("hex");
setValue(key); setValue(key);
updateField(key); updateField(key);
}; };

4
ui/src/components/Autocomplete.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Select } from "antd"; import { Select } from "antd";
@ -55,7 +55,7 @@ function AutoComplete({ placeholder, className, value, getOption, getOptions, on
}); });
}; };
const onSelectFn = (value: string, option: any) => { const onSelectFn = (value: string, option: Option) => {
setOption({ label: option.label, value: option.value }); setOption({ label: option.label, value: option.value });
if (onSelect !== undefined) { if (onSelect !== undefined) {

3
ui/src/components/AutocompleteInput.tsx
View File

@ -1,6 +1,7 @@
import { Form } from "antd"; import { Form } from "antd";
import Autocomplete, { OptionCallbackFunc, OptionsCallbackFunc } from "./Autocomplete"; import type { OptionCallbackFunc, OptionsCallbackFunc } from "./Autocomplete";
import Autocomplete from "./Autocomplete";
interface IProps { interface IProps {
label: string; label: string;

5
ui/src/components/CodeEditor.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Controlled as CodeMirror } from "react-codemirror2"; import { Controlled as CodeMirror } from "react-codemirror2";
import type { Editor, EditorChange } from "codemirror";
import { Form } from "antd"; import { Form } from "antd";
@ -23,7 +24,7 @@ function CodeEditor(props: IProps) {
setReloadKey(k => k + 1); setReloadKey(k => k + 1);
}, [form, props]); }, [form, props]);
const handleChange = (editor: any, data: any, newCode: string) => { const handleChange = (editor: Editor, data: EditorChange, newCode: string) => {
setValue(newCode); setValue(newCode);
form.setFieldsValue({ form.setFieldsValue({
[props.name]: newCode, [props.name]: newCode,

5
ui/src/components/DataTable.tsx
View File

@ -1,18 +1,19 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { Table } from "antd"; import { Table } from "antd";
import { ColumnsType } from "antd/es/table"; import type { ColumnsType } from "antd/es/table";
import SessionStore from "../stores/SessionStore"; import SessionStore from "../stores/SessionStore";
export type GetPageCallbackFunc = (totalCount: number, rows: object[]) => void; export type GetPageCallbackFunc = (totalCount: number, rows: object[]) => void;
interface IProps { interface IProps {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
columns: ColumnsType<any>; columns: ColumnsType<any>;
getPage: (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => void; getPage: (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => void;
onRowsSelectChange?: (ids: string[]) => void; onRowsSelectChange?: (ids: string[]) => void;
rowKey: string; rowKey: string;
refreshKey?: any; refreshKey?: unknown;
noPagination?: boolean; noPagination?: boolean;
} }

3
ui/src/components/DeleteConfirm.tsx
View File

@ -1,4 +1,5 @@
import { useState, PropsWithChildren } from "react"; import type { PropsWithChildren } from "react";
import { useState } from "react";
import { Popover, Button, Typography, Space, Input } from "antd"; import { Popover, Button, Typography, Space, Input } from "antd";
interface IProps { interface IProps {

7
ui/src/components/DevAddrInput.tsx
View File

@ -3,7 +3,8 @@ import React, { useState, useEffect } from "react";
import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd"; import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
import { ReloadOutlined, CopyOutlined } from "@ant-design/icons"; import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
import { GetRandomDevAddrRequest, GetRandomDevAddrResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb"; import type { GetRandomDevAddrResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
import { GetRandomDevAddrRequest } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
import DeviceStore from "../stores/DeviceStore"; import DeviceStore from "../stores/DeviceStore";
@ -39,7 +40,7 @@ function DevAddrInput(props: IProps) {
}; };
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let v = e.target.value; const v = e.target.value;
const match = v.match(/[A-Fa-f0-9]/g); const match = v.match(/[A-Fa-f0-9]/g);
let value = ""; let value = "";
@ -71,7 +72,7 @@ function DevAddrInput(props: IProps) {
}; };
const generateRandom = () => { const generateRandom = () => {
let req = new GetRandomDevAddrRequest(); const req = new GetRandomDevAddrRequest();
req.setDevEui(props.devEui); req.setDevEui(props.devEui);
DeviceStore.getRandomDevAddr(req, (resp: GetRandomDevAddrResponse) => { DeviceStore.getRandomDevAddr(req, (resp: GetRandomDevAddrResponse) => {

8
ui/src/components/EuiInput.tsx
View File

@ -36,7 +36,7 @@ function EuiInput(props: IProps) {
}; };
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let v = e.target.value; const v = e.target.value;
const match = v.match(/[A-Fa-f0-9]/g); const match = v.match(/[A-Fa-f0-9]/g);
let value = ""; let value = "";
@ -68,11 +68,11 @@ function EuiInput(props: IProps) {
}; };
const generateRandom = () => { const generateRandom = () => {
let cryptoObj = window.crypto || window.Crypto; const cryptoObj = window.crypto || window.Crypto;
let b = new Uint8Array(8); const b = new Uint8Array(8);
cryptoObj.getRandomValues(b); cryptoObj.getRandomValues(b);
let key = Buffer.from(b).toString("hex"); const key = Buffer.from(b).toString("hex");
setValue(key); setValue(key);
updateField(key); updateField(key);
}; };

27
ui/src/components/Header.tsx
View File

@ -1,15 +1,12 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { Button, Menu, Dropdown, Input, AutoComplete } from "antd"; import { Button, Menu, Dropdown, Input, AutoComplete } from "antd";
import { UserOutlined, DownOutlined, QuestionOutlined } from "@ant-design/icons"; import { UserOutlined, DownOutlined, QuestionOutlined } from "@ant-design/icons";
import { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb"; import type { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
import { import type { SettingsResponse, GlobalSearchResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
SettingsResponse, import { GlobalSearchRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
GlobalSearchRequest,
GlobalSearchResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import InternalStore from "../stores/InternalStore"; import InternalStore from "../stores/InternalStore";
import SessionStore from "../stores/SessionStore"; import SessionStore from "../stores/SessionStore";
@ -38,7 +35,7 @@ function Header({ user }: { user: User }) {
return; return;
} }
let req = new GlobalSearchRequest(); const req = new GlobalSearchRequest();
req.setLimit(20); req.setLimit(20);
req.setSearch(search); req.setSearch(search);
@ -52,8 +49,8 @@ function Header({ user }: { user: User }) {
return; return;
} }
let oidc = settings.getOpenidConnect()!; const oidc = settings.getOpenidConnect()!;
let oAuth2 = settings.getOauth2()!; const oAuth2 = settings.getOauth2()!;
if (oidc.getEnabled() && oidc.getLogoutUrl() !== "") { if (oidc.getEnabled() && oidc.getLogoutUrl() !== "") {
SessionStore.logout(false, () => { SessionStore.logout(false, () => {
@ -74,8 +71,8 @@ function Header({ user }: { user: User }) {
return null; return null;
} }
let oidcEnabled = settings!.getOpenidConnect()!.getEnabled(); const oidcEnabled = settings!.getOpenidConnect()!.getEnabled();
let oAuth2Enabled = settings!.getOauth2()!.getEnabled(); const oAuth2Enabled = settings!.getOauth2()!.getEnabled();
const menu = ( const menu = (
<Menu> <Menu>
@ -88,9 +85,9 @@ function Header({ user }: { user: User }) {
</Menu> </Menu>
); );
let options: { const options: {
label: any; label: JSX.Element;
options: any[]; options: ReturnType<typeof renderItem>[];
}[] = [ }[] = [
{ {
label: renderTitle("Tenants"), label: renderTitle("Tenants"),

26
ui/src/components/LogTable.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import { useState } from "react";
import moment from "moment"; import moment from "moment";
import { JSONTree as JSONTreeOriginal } from "react-json-tree"; import { JSONTree as JSONTreeOriginal } from "react-json-tree";
@ -7,7 +7,7 @@ import fileDownload from "js-file-download";
import { Tag, Drawer, Button, Table, Spin, Space } from "antd"; import { Tag, Drawer, Button, Table, Spin, Space } 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"; import type { LogItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
interface IProps { interface IProps {
logs: LogItem[]; logs: LogItem[];
@ -15,17 +15,17 @@ interface IProps {
function LogTable(props: IProps) { function LogTable(props: IProps) {
const [drawerOpen, setDrawerOpen] = useState<boolean>(false); const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
const [body, setBody] = useState<any>(null); const [body, setBody] = useState<string | null>(null);
const [drawerTitle, setDrawerTitle] = useState<any>(null); const [drawerTitle, setDrawerTitle] = useState<string | null>(null);
const onDrawerClose = () => { const onDrawerClose = () => {
setDrawerOpen(false); setDrawerOpen(false);
}; };
const onDrawerOpen = (time: any, body: any) => { const onDrawerOpen = (time: { seconds: number } | undefined, body: string) => {
let ts = new Date(0); const ts = new Date(0);
ts.setUTCSeconds(time.seconds); ts.setUTCSeconds(time!.seconds);
let drawerTitle = moment(ts).format("YYYY-MM-DD HH:mm:ss"); const drawerTitle = moment(ts).format("YYYY-MM-DD HH:mm:ss");
return () => { return () => {
setBody(body); setBody(body);
@ -35,16 +35,16 @@ function LogTable(props: IProps) {
}; };
const downloadSingleFrame = () => { const downloadSingleFrame = () => {
fileDownload(JSON.stringify(JSON.parse(body), null, 4), "single-log.json", "application/json"); fileDownload(JSON.stringify(JSON.parse(body!), null, 4), "single-log.json", "application/json");
}; };
const downloadFrames = () => { const downloadFrames = () => {
let items = props.logs.map((l, i) => JSON.parse(l.getBody())); const items = props.logs.map((l, i) => JSON.parse(l.getBody()));
fileDownload(JSON.stringify(items, null, 4), "log.json"); fileDownload(JSON.stringify(items, null, 4), "log.json");
}; };
let items = props.logs.map((l, i) => l.toObject()); const items = props.logs.map((l, i) => l.toObject());
let bodyJson = JSON.parse(body); const bodyJson = JSON.parse(body!);
const theme = { const theme = {
scheme: "google", scheme: "google",
@ -104,7 +104,7 @@ function LogTable(props: IProps) {
key: "time", key: "time",
width: 200, width: 200,
render: (text, obj) => { render: (text, obj) => {
let ts = new Date(0); const ts = new Date(0);
ts.setUTCSeconds(obj.time!.seconds); ts.setUTCSeconds(obj.time!.seconds);
return moment(ts).format("YYYY-MM-DD HH:mm:ss"); return moment(ts).format("YYYY-MM-DD HH:mm:ss");
}, },

9
ui/src/components/Map.tsx
View File

@ -1,8 +1,11 @@
import React, { useEffect, PropsWithChildren, useState } from "react"; import type { PropsWithChildren } from "react";
import { useEffect, useState } from "react";
import L, { LatLngTuple, FitBoundsOptions } from "leaflet"; import type { LatLngTuple, FitBoundsOptions } from "leaflet";
import L from "leaflet";
import "leaflet.awesome-markers"; import "leaflet.awesome-markers";
import { MarkerProps as LMarkerProps, useMap } from "react-leaflet"; import type { MarkerProps as LMarkerProps } from "react-leaflet";
import { useMap } from "react-leaflet";
import { MapContainer, Marker as LMarker, TileLayer } from "react-leaflet"; import { MapContainer, Marker as LMarker, TileLayer } from "react-leaflet";
import InternalStore from "../stores/InternalStore"; import InternalStore from "../stores/InternalStore";

21
ui/src/components/Menu.tsx
View File

@ -1,7 +1,8 @@
import React, { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom"; import { Link, useLocation, useNavigate } from "react-router-dom";
import { Menu, MenuProps, Typography } from "antd"; import type { MenuProps } from "antd";
import { Menu, Typography } from "antd";
import { import {
CloudOutlined, CloudOutlined,
HomeOutlined, HomeOutlined,
@ -15,15 +16,13 @@ import {
RadarChartOutlined, RadarChartOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { import type { GetTenantResponse, ListTenantsResponse } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
GetTenantResponse, import { ListTenantsRequest } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
ListTenantsRequest,
ListTenantsResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import { GetVersionResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb"; import type { GetVersionResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import Autocomplete, { OptionCallbackFunc, OptionsCallbackFunc } from "../components/Autocomplete"; import type { OptionCallbackFunc, OptionsCallbackFunc } from "../components/Autocomplete";
import Autocomplete from "../components/Autocomplete";
import Admin from "../components/Admin"; import Admin from "../components/Admin";
import TenantStore from "../stores/TenantStore"; import TenantStore from "../stores/TenantStore";
import SessionStore from "../stores/SessionStore"; import SessionStore from "../stores/SessionStore";
@ -42,7 +41,7 @@ function SideMenu() {
}; };
const getTenantOptions = (search: string, fn: OptionsCallbackFunc) => { const getTenantOptions = (search: string, fn: OptionsCallbackFunc) => {
let req = new ListTenantsRequest(); const req = new ListTenantsRequest();
req.setSearch(search); req.setSearch(search);
req.setLimit(10); req.setLimit(10);
@ -162,7 +161,7 @@ function SideMenu() {
parseLocation(); parseLocation();
}, [location, parseLocation]); }, [location, parseLocation]);
let items: MenuProps["items"] = []; const items: MenuProps["items"] = [];
if (SessionStore.isAdmin()) { if (SessionStore.isAdmin()) {
items.push({ items.push({

9
ui/src/components/MetricBar.tsx
View File

@ -1,11 +1,12 @@
import { Card } from "antd"; import { Card } from "antd";
import { TimeUnit } from "chart.js"; import type { TimeUnit } from "chart.js";
import { Bar } from "react-chartjs-2"; import { Bar } from "react-chartjs-2";
import moment from "moment"; import moment from "moment";
import palette from "google-palette"; import palette from "google-palette";
import { Metric, Aggregation } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb"; import type { Metric } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import { Aggregation } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
interface IProps { interface IProps {
metric: Metric; metric: Metric;
@ -20,7 +21,7 @@ function MetricBar(props: IProps) {
unit = "month"; unit = "month";
} }
const animation: false = false; const animation = false as const;
const options = { const options = {
animation: animation, animation: animation,
@ -43,7 +44,7 @@ function MetricBar(props: IProps) {
}, },
}; };
let data: { const data: {
labels: number[]; labels: number[];
datasets: { datasets: {
label: string; label: string;

11
ui/src/components/MetricChart.tsx
View File

@ -1,11 +1,12 @@
import { Card } from "antd"; import { Card } from "antd";
import { TimeUnit } from "chart.js"; import type { TimeUnit } from "chart.js";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import moment from "moment"; import moment from "moment";
import palette from "google-palette"; import palette from "google-palette";
import { Metric, Aggregation, MetricKind } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb"; import type { Metric } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import { Aggregation, MetricKind } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
interface IProps { interface IProps {
metric: Metric; metric: Metric;
@ -27,7 +28,7 @@ function MetricChart(props: IProps) {
tooltipFormat = "LT"; tooltipFormat = "LT";
} }
const animation: false = false; const animation = false as const;
const options = { const options = {
animation: animation, animation: animation,
@ -52,7 +53,7 @@ function MetricChart(props: IProps) {
}; };
let prevValue = 0; let prevValue = 0;
let data = { const data = {
labels: props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()), labels: props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
datasets: props.metric datasets: props.metric
.getDatasetsList() .getDatasetsList()
@ -72,7 +73,7 @@ function MetricChart(props: IProps) {
return null; return null;
} else { } else {
if (props.metric.getKind() === MetricKind.COUNTER) { if (props.metric.getKind() === MetricKind.COUNTER) {
let val = v - prevValue; const val = v - prevValue;
prevValue = v; prevValue = v;
if (val < 0) { if (val < 0) {
return 0; return 0;

23
ui/src/components/MetricHeatmap.tsx
View File

@ -1,11 +1,14 @@
// TODO: find a way to type `ctx`
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Card } from "antd"; import { Card } from "antd";
import { color } from "chart.js/helpers"; import { color } from "chart.js/helpers";
import { TimeUnit } from "chart.js"; import type { TimeUnit } from "chart.js";
import { Chart } from "react-chartjs-2"; import { Chart } from "react-chartjs-2";
import moment from "moment"; import moment from "moment";
import { Metric, Aggregation } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb"; import type { Metric } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import { Aggregation } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
interface IProps { interface IProps {
metric: Metric; metric: Metric;
@ -22,9 +25,9 @@ function MetricHeatmap(props: IProps) {
unit = "month"; unit = "month";
} }
const animation: false = false; const animation = false as const;
let options = { const options = {
animation: animation, animation: animation,
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
@ -63,13 +66,13 @@ function MetricHeatmap(props: IProps) {
}, },
}; };
let dataData: { const dataData: {
x: number; x: number;
y: string; y: string;
v: number; v: number;
}[] = []; }[] = [];
let data = { const data = {
labels: props.metric.getDatasetsList().map(v => v.getLabel()), labels: props.metric.getDatasetsList().map(v => v.getLabel()),
datasets: [ datasets: [
{ {
@ -93,8 +96,8 @@ function MetricHeatmap(props: IProps) {
const step = value - ctx.dataset.minValue; 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(); const result: [number, number, number] = ctx.dataset.fromColor.slice();
for (var i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
result[i] = Math.round(result[i] + factor * (ctx.dataset.toColor[i] - ctx.dataset.fromColor[i])); result[i] = Math.round(result[i] + factor * (ctx.dataset.toColor[i] - ctx.dataset.fromColor[i]));
} }
@ -117,8 +120,8 @@ function MetricHeatmap(props: IProps) {
const dsList = props.metric.getDatasetsList(); const dsList = props.metric.getDatasetsList();
for (let i = 0; i < tsList.length; i++) { for (let i = 0; i < tsList.length; i++) {
for (let ds of dsList) { for (const ds of dsList) {
let v = ds.getDataList()[i]; const v = ds.getDataList()[i];
if (v === 0) { if (v === 0) {
continue; continue;
} }

9
ui/src/components/RelayIdInput.tsx
View File

@ -1,4 +1,3 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd"; import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
@ -37,7 +36,7 @@ function RelayIdInput(props: IProps) {
}; };
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let v = e.target.value; const v = e.target.value;
const match = v.match(/[A-Fa-f0-9]/g); const match = v.match(/[A-Fa-f0-9]/g);
let value = ""; let value = "";
@ -69,11 +68,11 @@ function RelayIdInput(props: IProps) {
}; };
const generateRandom = () => { const generateRandom = () => {
let cryptoObj = window.crypto || window.Crypto; const cryptoObj = window.crypto || window.Crypto;
let b = new Uint8Array(4); const b = new Uint8Array(4);
cryptoObj.getRandomValues(b); cryptoObj.getRandomValues(b);
let key = Buffer.from(b).toString("hex"); const key = Buffer.from(b).toString("hex");
setValue(key); setValue(key);
updateField(key); updateField(key);
}; };

6
ui/src/index.tsx
View File

@ -19,7 +19,11 @@ import "./index.css";
Chart.register(MatrixController, MatrixElement, ...registerables); Chart.register(MatrixController, MatrixElement, ...registerables);
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(<App />); root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))

1
ui/src/react-app-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

16
ui/src/reportWebVitals.ts
View File

@ -1,13 +1,13 @@
import { ReportHandler } from "web-vitals"; import type { Metric } from "web-vitals";
const reportWebVitals = (onPerfEntry?: ReportHandler) => { const reportWebVitals = (onPerfEntry?: (metric: Metric) => void) => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { import("web-vitals").then(({ onCLS, onFCP, onLCP, onTTFB, onINP }) => {
getCLS(onPerfEntry); onCLS(onPerfEntry);
getFID(onPerfEntry); onFCP(onPerfEntry);
getFCP(onPerfEntry); onLCP(onPerfEntry);
getLCP(onPerfEntry); onTTFB(onPerfEntry);
getTTFB(onPerfEntry); onINP(onPerfEntry);
}); });
} }
}; };

2
ui/src/stores/ApplicationStore.ts
View File

@ -1,7 +1,7 @@
import { notification } from "antd"; import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { ApplicationServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/application_grpc_web_pb"; import { ApplicationServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/application_grpc_web_pb";
import { import type {
CreateApplicationRequest, CreateApplicationRequest,
CreateApplicationResponse, CreateApplicationResponse,
GetApplicationRequest, GetApplicationRequest,

2
ui/src/stores/DeviceProfileStore.ts
View File

@ -2,7 +2,7 @@ import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import * as google_protobuf_empty_pb from "google-protobuf/google/protobuf/empty_pb"; import * as google_protobuf_empty_pb from "google-protobuf/google/protobuf/empty_pb";
import { DeviceProfileServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_grpc_web_pb"; import { DeviceProfileServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_grpc_web_pb";
import { import type {
CreateDeviceProfileRequest, CreateDeviceProfileRequest,
CreateDeviceProfileResponse, CreateDeviceProfileResponse,
GetDeviceProfileRequest, GetDeviceProfileRequest,

2
ui/src/stores/DeviceProfileTemplateStore.ts
View File

@ -1,7 +1,7 @@
import { notification } from "antd"; import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { DeviceProfileTemplateServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_grpc_web_pb"; import { DeviceProfileTemplateServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_grpc_web_pb";
import { import type {
CreateDeviceProfileTemplateRequest, CreateDeviceProfileTemplateRequest,
GetDeviceProfileTemplateRequest, GetDeviceProfileTemplateRequest,
GetDeviceProfileTemplateResponse, GetDeviceProfileTemplateResponse,

2
ui/src/stores/DeviceStore.ts
View File

@ -2,7 +2,7 @@ import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { DeviceServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/device_grpc_web_pb"; import { DeviceServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/device_grpc_web_pb";
import { import type {
CreateDeviceRequest, CreateDeviceRequest,
GetDeviceRequest, GetDeviceRequest,
GetDeviceResponse, GetDeviceResponse,

22
ui/src/stores/GatewayStore.ts
View File

@ -1,7 +1,7 @@
import { notification } from "antd"; import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { GatewayServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/gateway_grpc_web_pb"; import { GatewayServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/gateway_grpc_web_pb";
import { import type {
CreateGatewayRequest, CreateGatewayRequest,
GetGatewayRequest, GetGatewayRequest,
GetGatewayResponse, GetGatewayResponse,
@ -151,8 +151,8 @@ class GatewayStore extends EventEmitter {
} }
callbackFunc(resp); callbackFunc(resp);
}) });
} };
listRelayGateways = (req: ListRelayGatewaysRequest, callbackFunc: (resp: ListRelayGatewaysResponse) => void) => { listRelayGateways = (req: ListRelayGatewaysRequest, callbackFunc: (resp: ListRelayGatewaysResponse) => void) => {
this.client.listRelayGateways(req, SessionStore.getMetadata(), (err, resp) => { this.client.listRelayGateways(req, SessionStore.getMetadata(), (err, resp) => {
@ -162,11 +162,11 @@ class GatewayStore extends EventEmitter {
} }
callbackFunc(resp); callbackFunc(resp);
}) });
} };
updateRelayGateway = (req: UpdateRelayGatewayRequest, callbackFunc: () => void) => { updateRelayGateway = (req: UpdateRelayGatewayRequest, callbackFunc: () => void) => {
this.client.updateRelayGateway(req, SessionStore.getMetadata(), (err) => { this.client.updateRelayGateway(req, SessionStore.getMetadata(), err => {
if (err !== null) { if (err !== null) {
HandleError(err); HandleError(err);
return; return;
@ -178,11 +178,11 @@ class GatewayStore extends EventEmitter {
}); });
callbackFunc(); callbackFunc();
}) });
} };
deleteRelayGateway = (req: DeleteRelayGatewayRequest, callbackFunc: () => void) => { deleteRelayGateway = (req: DeleteRelayGatewayRequest, callbackFunc: () => void) => {
this.client.deleteRelayGateway(req, SessionStore.getMetadata(), (err) => { this.client.deleteRelayGateway(req, SessionStore.getMetadata(), err => {
if (err !== null) { if (err !== null) {
HandleError(err); HandleError(err);
return; return;
@ -194,8 +194,8 @@ class GatewayStore extends EventEmitter {
}); });
callbackFunc(); callbackFunc();
}) });
} };
} }
const gatewayStore = new GatewayStore(); const gatewayStore = new GatewayStore();

24
ui/src/stores/InternalStore.ts
View File

@ -1,10 +1,10 @@
import * as grpcWeb from "grpc-web"; import type * as grpcWeb from "grpc-web";
import * as google_protobuf_empty_pb from "google-protobuf/google/protobuf/empty_pb"; import * as google_protobuf_empty_pb from "google-protobuf/google/protobuf/empty_pb";
import { notification } from "antd"; import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { InternalServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/internal_grpc_web_pb"; import { InternalServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/internal_grpc_web_pb";
import { import type {
CreateApiKeyRequest, CreateApiKeyRequest,
CreateApiKeyResponse, CreateApiKeyResponse,
DeleteApiKeyRequest, DeleteApiKeyRequest,
@ -56,7 +56,7 @@ class InternalStore extends EventEmitter {
}; };
deleteApiKey = (req: DeleteApiKeyRequest, callbackFunc: () => void) => { deleteApiKey = (req: DeleteApiKeyRequest, callbackFunc: () => void) => {
this.client.deleteApiKey(req, SessionStore.getMetadata(), (err) => { this.client.deleteApiKey(req, SessionStore.getMetadata(), err => {
if (err !== null) { if (err !== null) {
HandleError(err); HandleError(err);
return; return;
@ -83,9 +83,9 @@ class InternalStore extends EventEmitter {
}; };
streamGatewayFrames = (req: StreamGatewayFramesRequest, callbackFunc: (resp: LogItem) => void): (() => void) => { streamGatewayFrames = (req: StreamGatewayFramesRequest, callbackFunc: (resp: LogItem) => void): (() => void) => {
var stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined; let stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined;
let setup = () => { const setup = () => {
console.log("Setting up gRPC stream"); console.log("Setting up gRPC stream");
stream = this.client.streamGatewayFrames(req, SessionStore.getMetadata()); stream = this.client.streamGatewayFrames(req, SessionStore.getMetadata());
@ -93,7 +93,7 @@ class InternalStore extends EventEmitter {
callbackFunc(resp); callbackFunc(resp);
}); });
stream = stream.on("end", function() { stream = stream.on("end", function () {
console.log("gRPC stream end, reconnecting"); console.log("gRPC stream end, reconnecting");
setTimeout(setup, 1000); setTimeout(setup, 1000);
}); });
@ -110,9 +110,9 @@ class InternalStore extends EventEmitter {
}; };
streamDeviceFrames = (req: StreamDeviceFramesRequest, callbackFunc: (resp: LogItem) => void): (() => void) => { streamDeviceFrames = (req: StreamDeviceFramesRequest, callbackFunc: (resp: LogItem) => void): (() => void) => {
var stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined; let stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined;
let setup = () => { const setup = () => {
console.log("Setting up gRPC stream"); console.log("Setting up gRPC stream");
stream = this.client.streamDeviceFrames(req, SessionStore.getMetadata()); stream = this.client.streamDeviceFrames(req, SessionStore.getMetadata());
@ -120,7 +120,7 @@ class InternalStore extends EventEmitter {
callbackFunc(resp); callbackFunc(resp);
}); });
stream = stream.on("end", function() { stream = stream.on("end", function () {
console.log("gRPC stream end, reconnecting"); console.log("gRPC stream end, reconnecting");
setTimeout(setup, 1000); setTimeout(setup, 1000);
}); });
@ -136,9 +136,9 @@ class InternalStore extends EventEmitter {
}; };
streamDeviceEvents = (req: StreamDeviceEventsRequest, callbackFunc: (resp: LogItem) => void): (() => void) => { streamDeviceEvents = (req: StreamDeviceEventsRequest, callbackFunc: (resp: LogItem) => void): (() => void) => {
var stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined; let stream: grpcWeb.ClientReadableStream<LogItem> | undefined = undefined;
let setup = () => { const setup = () => {
console.log("Setting up gRPC stream"); console.log("Setting up gRPC stream");
stream = this.client.streamDeviceEvents(req, SessionStore.getMetadata()); stream = this.client.streamDeviceEvents(req, SessionStore.getMetadata());
@ -146,7 +146,7 @@ class InternalStore extends EventEmitter {
callbackFunc(resp); callbackFunc(resp);
}); });
stream = stream.on("end", function() { stream = stream.on("end", function () {
console.log("gRPC stream end, reconnecting"); console.log("gRPC stream end, reconnecting");
setTimeout(setup, 1000); setTimeout(setup, 1000);
}); });

2
ui/src/stores/MulticastGroupStore.ts
View File

@ -2,7 +2,7 @@ import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { MulticastGroupServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/multicast_group_grpc_web_pb"; import { MulticastGroupServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/multicast_group_grpc_web_pb";
import { import type {
CreateMulticastGroupRequest, CreateMulticastGroupRequest,
CreateMulticastGroupResponse, CreateMulticastGroupResponse,
GetMulticastGroupRequest, GetMulticastGroupRequest,

2
ui/src/stores/RelayStore.ts
View File

@ -2,7 +2,7 @@ import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { RelayServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/relay_grpc_web_pb"; import { RelayServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/relay_grpc_web_pb";
import { import type {
ListRelaysRequest, ListRelaysRequest,
ListRelaysResponse, ListRelaysResponse,
AddRelayDeviceRequest, AddRelayDeviceRequest,

20
ui/src/stores/SessionStore.ts
View File

@ -1,15 +1,15 @@
import google_protobuf_empty_pb from "google-protobuf/google/protobuf/empty_pb"; import google_protobuf_empty_pb from "google-protobuf/google/protobuf/empty_pb";
import { Metadata } from "grpc-web"; import type { Metadata } from "grpc-web";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { InternalServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/internal_grpc_web_pb"; import { InternalServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/internal_grpc_web_pb";
import { import type {
LoginRequest,
UserTenantLink, UserTenantLink,
OpenIdConnectLoginRequest, OpenIdConnectLoginRequest,
OAuth2LoginRequest, OAuth2LoginRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb"; import { LoginRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import type { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
import { HandleError, HandleLoginError } from "./helpers"; import { HandleError, HandleLoginError } from "./helpers";
@ -27,8 +27,8 @@ class SessionStore extends EventEmitter {
this.fetchProfile(() => {}); this.fetchProfile(() => {});
} }
login = (email: string, password: string, callbackFunc: any) => { login = (email: string, password: string, callbackFunc: () => void) => {
let req = new LoginRequest(); const req = new LoginRequest();
req.setEmail(email); req.setEmail(email);
req.setPassword(password); req.setPassword(password);
this.client.login(req, {}, (err, resp) => { this.client.login(req, {}, (err, resp) => {
@ -42,7 +42,7 @@ class SessionStore extends EventEmitter {
}); });
}; };
openIdConnectLogin = (req: OpenIdConnectLoginRequest, callbackFunc: any) => { openIdConnectLogin = (req: OpenIdConnectLoginRequest, callbackFunc: () => void) => {
this.client.openIdConnectLogin(req, {}, (err, resp) => { this.client.openIdConnectLogin(req, {}, (err, resp) => {
if (err !== null) { if (err !== null) {
HandleLoginError(err); HandleLoginError(err);
@ -54,7 +54,7 @@ class SessionStore extends EventEmitter {
}); });
}; };
oAuth2Login = (req: OAuth2LoginRequest, callbackFunc: any) => { oAuth2Login = (req: OAuth2LoginRequest, callbackFunc: () => void) => {
this.client.oAuth2Login(req, {}, (err, resp) => { this.client.oAuth2Login(req, {}, (err, resp) => {
if (err !== null) { if (err !== null) {
HandleLoginError(err); HandleLoginError(err);
@ -83,7 +83,7 @@ class SessionStore extends EventEmitter {
}; };
getToken = (): string => { getToken = (): string => {
let token = localStorage.getItem("token"); const token = localStorage.getItem("token");
if (token == null) { if (token == null) {
return ""; return "";
} }
@ -118,7 +118,7 @@ class SessionStore extends EventEmitter {
}; };
}; };
fetchProfile = (callbackFunc: any) => { fetchProfile = (callbackFunc: () => void) => {
if (this.getToken() === "") { if (this.getToken() === "") {
return; return;
} }

6
ui/src/stores/TenantStore.ts
View File

@ -1,10 +1,9 @@
import { notification } from "antd"; import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { TenantServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_grpc_web_pb"; import { TenantServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_grpc_web_pb";
import { import type {
CreateTenantRequest, CreateTenantRequest,
CreateTenantResponse, CreateTenantResponse,
GetTenantRequest,
GetTenantResponse, GetTenantResponse,
UpdateTenantRequest, UpdateTenantRequest,
ListTenantsRequest, ListTenantsRequest,
@ -18,6 +17,7 @@ import {
ListTenantUsersRequest, ListTenantUsersRequest,
ListTenantUsersResponse, ListTenantUsersResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import { GetTenantRequest } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import SessionStore from "./SessionStore"; import SessionStore from "./SessionStore";
import { HandleError } from "./helpers"; import { HandleError } from "./helpers";
@ -47,7 +47,7 @@ class TenantStore extends EventEmitter {
}; };
get = (id: string, callbackFunc: (resp: GetTenantResponse) => void) => { get = (id: string, callbackFunc: (resp: GetTenantResponse) => void) => {
let req = new GetTenantRequest(); const req = new GetTenantRequest();
req.setId(id); req.setId(id);
this.client.get(req, SessionStore.getMetadata(), (err, resp) => { this.client.get(req, SessionStore.getMetadata(), (err, resp) => {

2
ui/src/stores/UserStore.ts
View File

@ -1,7 +1,7 @@
import { notification } from "antd"; import { notification } from "antd";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { UserServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/user_grpc_web_pb"; import { UserServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/user_grpc_web_pb";
import { import type {
CreateUserRequest, CreateUserRequest,
CreateUserResponse, CreateUserResponse,
GetUserRequest, GetUserRequest,

2
ui/src/stores/helpers.ts
View File

@ -1,5 +1,5 @@
import { notification } from "antd"; import { notification } from "antd";
import { RpcError } from "grpc-web"; import type { RpcError } from "grpc-web";
import history from "../history"; import history from "../history";

0
ui/types/google-palette/index.d.ts → ui/src/types/google-palette/index.d.ts vendored
View File

2
ui/src/views/api-keys/ApiKeyForm.tsx
View File

@ -11,7 +11,7 @@ interface IProps {
function ApiKeyForm(props: IProps) { function ApiKeyForm(props: IProps) {
const onFinish = (values: ApiKey.AsObject) => { const onFinish = (values: ApiKey.AsObject) => {
let apiKey = new ApiKey(); const apiKey = new ApiKey();
apiKey.setName(values.name); apiKey.setName(values.name);
props.onFinish(apiKey); props.onFinish(apiKey);
}; };

2
ui/src/views/api-keys/ApiKeyToken.tsx
View File

@ -2,7 +2,7 @@ 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"; import type { CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
interface IProps { interface IProps {
createApiKeyResponse: CreateApiKeyResponse; createApiKeyResponse: CreateApiKeyResponse;

7
ui/src/views/api-keys/CreateAdminApiKey.tsx
View File

@ -1,10 +1,11 @@
import React, { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Space, Breadcrumb, Card } from "antd"; import { Space, Breadcrumb, Card } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { ApiKey, CreateApiKeyRequest, CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb"; import type { CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { ApiKey, CreateApiKeyRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import ApiKeyForm from "./ApiKeyForm"; import ApiKeyForm from "./ApiKeyForm";
import ApiKeyToken from "./ApiKeyToken"; import ApiKeyToken from "./ApiKeyToken";
@ -16,7 +17,7 @@ function CreateAdminApiKey() {
const onFinish = (obj: ApiKey) => { const onFinish = (obj: ApiKey) => {
obj.setIsAdmin(true); obj.setIsAdmin(true);
let req = new CreateApiKeyRequest(); const req = new CreateApiKeyRequest();
req.setApiKey(obj); req.setApiKey(obj);
InternalStore.createApiKey(req, (resp: CreateApiKeyResponse) => { InternalStore.createApiKey(req, (resp: CreateApiKeyResponse) => {

9
ui/src/views/api-keys/CreateTenantApiKey.tsx
View File

@ -1,11 +1,12 @@
import React, { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Space, Breadcrumb, Card } from "antd"; import { Space, Breadcrumb, Card } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { ApiKey, CreateApiKeyRequest, CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb"; import type { CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb"; import { ApiKey, CreateApiKeyRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import ApiKeyForm from "./ApiKeyForm"; import ApiKeyForm from "./ApiKeyForm";
import ApiKeyToken from "./ApiKeyToken"; import ApiKeyToken from "./ApiKeyToken";
@ -21,7 +22,7 @@ function CreateTenantApiKey(props: IProps) {
const onFinish = (obj: ApiKey) => { const onFinish = (obj: ApiKey) => {
obj.setTenantId(props.tenant.getId()); obj.setTenantId(props.tenant.getId());
let req = new CreateApiKeyRequest(); const req = new CreateApiKeyRequest();
req.setApiKey(obj); req.setApiKey(obj);
InternalStore.createApiKey(req, (resp: CreateApiKeyResponse) => { InternalStore.createApiKey(req, (resp: CreateApiKeyResponse) => {

19
ui/src/views/api-keys/ListAdminApiKeys.tsx
View File

@ -1,19 +1,16 @@
import React, { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { DeleteOutlined } from "@ant-design/icons"; import { DeleteOutlined } from "@ant-design/icons";
import { Space, Breadcrumb, Button } from "antd"; import { Space, Breadcrumb, Button } from "antd";
import { ColumnsType } from "antd/es/table"; import type { ColumnsType } from "antd/es/table";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { import type { ListApiKeysResponse, ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
ListApiKeysRequest, import { ListApiKeysRequest, DeleteApiKeyRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
ListApiKeysResponse,
DeleteApiKeyRequest,
ApiKey,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import DataTable, { GetPageCallbackFunc } from "../../components/DataTable"; import type { GetPageCallbackFunc } from "../../components/DataTable";
import DataTable from "../../components/DataTable";
import InternalStore from "../../stores/InternalStore"; import InternalStore from "../../stores/InternalStore";
import DeleteConfirm from "../../components/DeleteConfirm"; import DeleteConfirm from "../../components/DeleteConfirm";
@ -47,7 +44,7 @@ function ListAdminApiKeys() {
const deleteApiKey = (id: string): (() => void) => { const deleteApiKey = (id: string): (() => void) => {
return () => { return () => {
let req = new DeleteApiKeyRequest(); const req = new DeleteApiKeyRequest();
req.setId(id); req.setId(id);
InternalStore.deleteApiKey(req, () => { InternalStore.deleteApiKey(req, () => {
@ -58,7 +55,7 @@ function ListAdminApiKeys() {
}; };
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => { const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApiKeysRequest(); const req = new ListApiKeysRequest();
req.setLimit(limit); req.setLimit(limit);
req.setOffset(offset); req.setOffset(offset);
req.setIsAdmin(true); req.setIsAdmin(true);

21
ui/src/views/api-keys/ListTenantApiKeys.tsx
View File

@ -1,20 +1,17 @@
import React, { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { DeleteOutlined } from "@ant-design/icons"; import { DeleteOutlined } from "@ant-design/icons";
import { Space, Breadcrumb, Button } from "antd"; import { Space, Breadcrumb, Button } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { ColumnsType } from "antd/es/table"; import type { ColumnsType } from "antd/es/table";
import { import type { ListApiKeysResponse, ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
ListApiKeysRequest, import { ListApiKeysRequest, DeleteApiKeyRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
ListApiKeysResponse, import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
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"; import type { GetPageCallbackFunc } from "../../components/DataTable";
import DataTable from "../../components/DataTable";
import InternalStore from "../../stores/InternalStore"; import InternalStore from "../../stores/InternalStore";
import DeleteConfirm from "../../components/DeleteConfirm"; import DeleteConfirm from "../../components/DeleteConfirm";
import Admin from "../../components/Admin"; import Admin from "../../components/Admin";
@ -55,7 +52,7 @@ function ListTenantApiKeys(props: IProps) {
const deleteApiKey = (id: string): (() => void) => { const deleteApiKey = (id: string): (() => void) => {
return () => { return () => {
let req = new DeleteApiKeyRequest(); const req = new DeleteApiKeyRequest();
req.setId(id); req.setId(id);
InternalStore.deleteApiKey(req, () => { InternalStore.deleteApiKey(req, () => {
@ -66,7 +63,7 @@ function ListTenantApiKeys(props: IProps) {
}; };
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => { const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApiKeysRequest(); const req = new ListApiKeysRequest();
req.setLimit(limit); req.setLimit(limit);
req.setOffset(offset); req.setOffset(offset);
req.setTenantId(props.tenant.getId()); req.setTenantId(props.tenant.getId());

2
ui/src/views/applications/ApplicationForm.tsx
View File

@ -13,7 +13,7 @@ interface IProps {
function ApplicationForm(props: IProps) { function ApplicationForm(props: IProps) {
const onFinish = (values: Application.AsObject) => { const onFinish = (values: Application.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let app = new Application(); const app = new Application();
app.setId(v.id); app.setId(v.id);
app.setTenantId(v.tenantId); app.setTenantId(v.tenantId);

7
ui/src/views/applications/ApplicationLayout.tsx
View File

@ -3,8 +3,9 @@ import { Route, Routes, Link, useNavigate, useLocation } from "react-router-dom"
import { Space, Breadcrumb, Card, Button, Menu } from "antd"; import { Space, Breadcrumb, Card, Button, Menu } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb"; import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import { Application, DeleteApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../stores/ApplicationStore"; import ApplicationStore from "../../stores/ApplicationStore";
import SessionStore from "../../stores/SessionStore"; import SessionStore from "../../stores/SessionStore";
@ -49,7 +50,7 @@ function ApplicationLayout(props: IProps) {
const location = useLocation(); const location = useLocation();
const deleteApplication = () => { const deleteApplication = () => {
let req = new DeleteApplicationRequest(); const req = new DeleteApplicationRequest();
req.setId(props.application.getId()); req.setId(props.application.getId());
ApplicationStore.delete(req, () => { ApplicationStore.delete(req, () => {

13
ui/src/views/applications/ApplicationLoader.tsx
View File

@ -1,12 +1,9 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Route, Routes, useParams } from "react-router-dom"; import { Route, Routes, useParams } from "react-router-dom";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb"; import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import { import type { Application, GetApplicationResponse } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
Application, import { GetApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
GetApplicationRequest,
GetApplicationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../stores/ApplicationStore"; import ApplicationStore from "../../stores/ApplicationStore";
import ApplicationLayout from "./ApplicationLayout"; import ApplicationLayout from "./ApplicationLayout";
@ -27,7 +24,7 @@ function ApplicationLoader(props: IProps) {
useEffect(() => { useEffect(() => {
const loadApplication = () => { const loadApplication = () => {
let req = new GetApplicationRequest(); const req = new GetApplicationRequest();
req.setId(applicationId!); req.setId(applicationId!);
ApplicationStore.get(req, (resp: GetApplicationResponse) => { ApplicationStore.get(req, (resp: GetApplicationResponse) => {

11
ui/src/views/applications/CreateApplication.tsx
View File

@ -3,12 +3,9 @@ import { Link, useNavigate } from "react-router-dom";
import { Space, Breadcrumb, Card } from "antd"; import { Space, Breadcrumb, Card } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb"; import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import { import type { CreateApplicationResponse } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
Application, import { Application, CreateApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
CreateApplicationRequest,
CreateApplicationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationForm from "./ApplicationForm"; import ApplicationForm from "./ApplicationForm";
import ApplicationStore from "../../stores/ApplicationStore"; import ApplicationStore from "../../stores/ApplicationStore";
@ -23,7 +20,7 @@ function CreateApplication(props: IProps) {
const onFinish = (obj: Application) => { const onFinish = (obj: Application) => {
obj.setTenantId(props.tenant.getId()); obj.setTenantId(props.tenant.getId());
let req = new CreateApplicationRequest(); const req = new CreateApplicationRequest();
req.setApplication(obj); req.setApplication(obj);
ApplicationStore.create(req, (resp: CreateApplicationResponse) => { ApplicationStore.create(req, (resp: CreateApplicationResponse) => {

5
ui/src/views/applications/EditApplication.tsx
View File

@ -1,6 +1,7 @@
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Application, UpdateApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { UpdateApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../stores/ApplicationStore"; import ApplicationStore from "../../stores/ApplicationStore";
import ApplicationForm from "./ApplicationForm"; import ApplicationForm from "./ApplicationForm";
@ -14,7 +15,7 @@ function EditApplication(props: IProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const onFinish = (obj: Application) => { const onFinish = (obj: Application) => {
let req = new UpdateApplicationRequest(); const req = new UpdateApplicationRequest();
req.setApplication(obj); req.setApplication(obj);
ApplicationStore.update(req, () => { ApplicationStore.update(req, () => {

13
ui/src/views/applications/ListApplications.tsx
View File

@ -1,17 +1,18 @@
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Space, Breadcrumb, Button } from "antd"; import { Space, Breadcrumb, Button } from "antd";
import { ColumnsType } from "antd/es/table"; import type { ColumnsType } from "antd/es/table";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { import type {
ListApplicationsRequest,
ListApplicationsResponse, ListApplicationsResponse,
ApplicationListItem, ApplicationListItem,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb"; import { ListApplicationsRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import DataTable, { GetPageCallbackFunc } from "../../components/DataTable"; import type { GetPageCallbackFunc } from "../../components/DataTable";
import DataTable from "../../components/DataTable";
import ApplicationStore from "../../stores/ApplicationStore"; import ApplicationStore from "../../stores/ApplicationStore";
import Admin from "../../components/Admin"; import Admin from "../../components/Admin";
@ -36,7 +37,7 @@ function ListApplications(props: IProps) {
]; ];
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => { const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApplicationsRequest(); const req = new ListApplicationsRequest();
req.setTenantId(props.tenant.getId()); req.setTenantId(props.tenant.getId());
req.setLimit(limit); req.setLimit(limit);
req.setOffset(offset); req.setOffset(offset);

19
ui/src/views/applications/ListIntegrations.tsx
View File

@ -1,14 +1,13 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Row } from "antd"; import { Row } from "antd";
import { import type {
Application, Application,
ListIntegrationsRequest,
ListIntegrationsResponse, ListIntegrationsResponse,
IntegrationListItem, IntegrationListItem,
IntegrationKind,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { ListIntegrationsRequest, IntegrationKind } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../stores/ApplicationStore"; import ApplicationStore from "../../stores/ApplicationStore";
import HttpCard from "./integrations/HttpCard"; import HttpCard from "./integrations/HttpCard";
@ -28,20 +27,20 @@ interface IProps {
} }
function ListIntegrations(props: IProps) { function ListIntegrations(props: IProps) {
const [configured, setConfigured] = useState<any[]>([]); const [configured, setConfigured] = useState<JSX.Element[]>([]);
const [available, setAvailable] = useState<any[]>([]); const [available, setAvailable] = useState<JSX.Element[]>([]);
useEffect(() => { useEffect(() => {
const loadIntegrations = () => { const loadIntegrations = () => {
let req = new ListIntegrationsRequest(); const req = new ListIntegrationsRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.listIntegrations(req, (resp: ListIntegrationsResponse) => { ApplicationStore.listIntegrations(req, (resp: ListIntegrationsResponse) => {
let configured: any[] = []; const configured: JSX.Element[] = [];
let available: any[] = []; const available: JSX.Element[] = [];
const includes = (integrations: IntegrationListItem[], kind: IntegrationKind) => { const includes = (integrations: IntegrationListItem[], kind: IntegrationKind) => {
for (let x of integrations) { for (const x of integrations) {
if (x.getKind() === kind) { if (x.getKind() === kind) {
return true; return true;
} }

9
ui/src/views/applications/integrations/AwsSnsCard.tsx
View File

@ -3,7 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Application, DeleteAwsSnsIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteAwsSnsIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -14,15 +15,15 @@ interface IProps {
function AwsSns(props: IProps) { function AwsSns(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteAwsSnsIntegrationRequest(); const req = new DeleteAwsSnsIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteAwsSnsIntegration(req, () => {}); ApplicationStore.deleteAwsSnsIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="aws-sns/create"> <Link to="aws-sns/create">
<PlusOutlined /> <PlusOutlined />

2
ui/src/views/applications/integrations/AwsSnsIntegrationForm.tsx
View File

@ -10,7 +10,7 @@ interface IProps {
function AwsSnsIntegrationForm(props: IProps) { function AwsSnsIntegrationForm(props: IProps) {
const onFinish = (values: AwsSnsIntegration.AsObject) => { const onFinish = (values: AwsSnsIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new AwsSnsIntegration(); const i = new AwsSnsIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setEncoding(v.encoding); i.setEncoding(v.encoding);

12
ui/src/views/applications/integrations/AzureServiceBusCard.tsx
View File

@ -3,10 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
Application, import { DeleteAzureServiceBusIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
DeleteAzureServiceBusIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -17,14 +15,14 @@ interface IProps {
function AzureServiceBusCard(props: IProps) { function AzureServiceBusCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteAzureServiceBusIntegrationRequest(); const req = new DeleteAzureServiceBusIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteAzureServiceBusIntegration(req, () => {}); ApplicationStore.deleteAzureServiceBusIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="azure-service-bus/create"> <Link to="azure-service-bus/create">
<PlusOutlined /> <PlusOutlined />

2
ui/src/views/applications/integrations/AzureServiceBusIntegrationForm.tsx
View File

@ -12,7 +12,7 @@ interface IProps {
function AzureServiceBusIntegrationForm(props: IProps) { function AzureServiceBusIntegrationForm(props: IProps) {
const onFinish = (values: AzureServiceBusIntegration.AsObject) => { const onFinish = (values: AzureServiceBusIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new AzureServiceBusIntegration(); const i = new AzureServiceBusIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setEncoding(v.encoding); i.setEncoding(v.encoding);

4
ui/src/views/applications/integrations/CreateAwsSnsIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
AwsSnsIntegration, AwsSnsIntegration,
CreateAwsSnsIntegrationRequest, CreateAwsSnsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateAwsSnsIntegration(props: IProps) {
const onFinish = (obj: AwsSnsIntegration) => { const onFinish = (obj: AwsSnsIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateAwsSnsIntegrationRequest(); const req = new CreateAwsSnsIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createAwsSnsIntegration(req, () => { ApplicationStore.createAwsSnsIntegration(req, () => {

4
ui/src/views/applications/integrations/CreateAzureServiceBusIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
AzureServiceBusIntegration, AzureServiceBusIntegration,
CreateAzureServiceBusIntegrationRequest, CreateAzureServiceBusIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateAzureServiceBusIntegration(props: IProps) {
const onFinish = (obj: AzureServiceBusIntegration) => { const onFinish = (obj: AzureServiceBusIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateAzureServiceBusIntegrationRequest(); const req = new CreateAzureServiceBusIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createAzureServiceBusIntegration(req, () => { ApplicationStore.createAzureServiceBusIntegration(req, () => {

4
ui/src/views/applications/integrations/CreateGcpPubSubIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
GcpPubSubIntegration, GcpPubSubIntegration,
CreateGcpPubSubIntegrationRequest, CreateGcpPubSubIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateGcpPubSubIntegration(props: IProps) {
const onFinish = (obj: GcpPubSubIntegration) => { const onFinish = (obj: GcpPubSubIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateGcpPubSubIntegrationRequest(); const req = new CreateGcpPubSubIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createGcpPubSubIntegration(req, () => { ApplicationStore.createGcpPubSubIntegration(req, () => {

9
ui/src/views/applications/integrations/CreateHttpIntegration.tsx
View File

@ -2,11 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
Application, import { HttpIntegration, CreateHttpIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
HttpIntegration,
CreateHttpIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import HttpIntegrationForm from "./HttpIntegrationForm"; import HttpIntegrationForm from "./HttpIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -21,7 +18,7 @@ function CreateHttpIntegration(props: IProps) {
const onFinish = (obj: HttpIntegration) => { const onFinish = (obj: HttpIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateHttpIntegrationRequest(); const req = new CreateHttpIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createHttpIntegration(req, () => { ApplicationStore.createHttpIntegration(req, () => {

4
ui/src/views/applications/integrations/CreateIftttIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
IftttIntegration, IftttIntegration,
CreateIftttIntegrationRequest, CreateIftttIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -22,7 +22,7 @@ function CreateIftttIntegration(props: IProps) {
const onFinish = (obj: IftttIntegration) => { const onFinish = (obj: IftttIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateIftttIntegrationRequest(); const req = new CreateIftttIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createIftttIntegration(req, () => { ApplicationStore.createIftttIntegration(req, () => {

4
ui/src/views/applications/integrations/CreateInfluxDbIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
InfluxDbIntegration, InfluxDbIntegration,
CreateInfluxDbIntegrationRequest, CreateInfluxDbIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateInfluxDbIntegration(props: IProps) {
const onFinish = (obj: InfluxDbIntegration) => { const onFinish = (obj: InfluxDbIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateInfluxDbIntegrationRequest(); const req = new CreateInfluxDbIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createInfluxDbIntegration(req, () => { ApplicationStore.createInfluxDbIntegration(req, () => {

8
ui/src/views/applications/integrations/CreateLoRaCloudIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
LoraCloudIntegration, LoraCloudIntegration,
LoraCloudModemGeolocationServices, LoraCloudModemGeolocationServices,
CreateLoraCloudIntegrationRequest, CreateLoraCloudIntegrationRequest,
@ -22,7 +22,7 @@ function CreateLoRaCloudIntegration(props: IProps) {
const onFinish = (obj: LoraCloudIntegration) => { const onFinish = (obj: LoraCloudIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateLoraCloudIntegrationRequest(); const req = new CreateLoraCloudIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createLoraCloudIntegration(req, () => { ApplicationStore.createLoraCloudIntegration(req, () => {
@ -30,8 +30,8 @@ function CreateLoRaCloudIntegration(props: IProps) {
}); });
}; };
let i = new LoraCloudIntegration(); const i = new LoraCloudIntegration();
let mgs = new LoraCloudModemGeolocationServices(); const mgs = new LoraCloudModemGeolocationServices();
mgs.setModemEnabled(true); mgs.setModemEnabled(true);
mgs.setForwardFPortsList([192, 197, 198, 199]); mgs.setForwardFPortsList([192, 197, 198, 199]);

4
ui/src/views/applications/integrations/CreateMyDevicesIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
MyDevicesIntegration, MyDevicesIntegration,
CreateMyDevicesIntegrationRequest, CreateMyDevicesIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateMyDevicesIntegration(props: IProps) {
const onFinish = (obj: MyDevicesIntegration) => { const onFinish = (obj: MyDevicesIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateMyDevicesIntegrationRequest(); const req = new CreateMyDevicesIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createMyDevicesIntegration(req, () => { ApplicationStore.createMyDevicesIntegration(req, () => {

4
ui/src/views/applications/integrations/CreatePilotThingsIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
PilotThingsIntegration, PilotThingsIntegration,
CreatePilotThingsIntegrationRequest, CreatePilotThingsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreatePilotThingsIntegration(props: IProps) {
const onFinish = (obj: PilotThingsIntegration) => { const onFinish = (obj: PilotThingsIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreatePilotThingsIntegrationRequest(); const req = new CreatePilotThingsIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createPilotThingsIntegration(req, () => { ApplicationStore.createPilotThingsIntegration(req, () => {

4
ui/src/views/applications/integrations/CreateThingsBoardIntegration.tsx
View File

@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { import {
Application,
ThingsBoardIntegration, ThingsBoardIntegration,
CreateThingsBoardIntegrationRequest, CreateThingsBoardIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateThingsBoardIntegration(props: IProps) {
const onFinish = (obj: ThingsBoardIntegration) => { const onFinish = (obj: ThingsBoardIntegration) => {
obj.setApplicationId(props.application.getId()); obj.setApplicationId(props.application.getId());
let req = new CreateThingsBoardIntegrationRequest(); const req = new CreateThingsBoardIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.createThingsBoardIntegration(req, () => { ApplicationStore.createThingsBoardIntegration(req, () => {

12
ui/src/views/applications/integrations/EditAwsSnsIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
AwsSnsIntegration, AwsSnsIntegration,
GetAwsSnsIntegrationRequest,
GetAwsSnsIntegrationResponse, GetAwsSnsIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetAwsSnsIntegrationRequest,
UpdateAwsSnsIntegrationRequest, UpdateAwsSnsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditAwsSnsIntegration(props: IProps) {
const [integration, setIntegration] = useState<AwsSnsIntegration | undefined>(undefined); const [integration, setIntegration] = useState<AwsSnsIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetAwsSnsIntegrationRequest(); const req = new GetAwsSnsIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getAwsSnsIntegration(req, (resp: GetAwsSnsIntegrationResponse) => { ApplicationStore.getAwsSnsIntegration(req, (resp: GetAwsSnsIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditAwsSnsIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: AwsSnsIntegration) => { const onFinish = (obj: AwsSnsIntegration) => {
let req = new UpdateAwsSnsIntegrationRequest(); const req = new UpdateAwsSnsIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateAwsSnsIntegration(req, () => { ApplicationStore.updateAwsSnsIntegration(req, () => {

12
ui/src/views/applications/integrations/EditAzureServiceBusIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
AzureServiceBusIntegration, AzureServiceBusIntegration,
GetAzureServiceBusIntegrationRequest,
GetAzureServiceBusIntegrationResponse, GetAzureServiceBusIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetAzureServiceBusIntegrationRequest,
UpdateAzureServiceBusIntegrationRequest, UpdateAzureServiceBusIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditAzureServiceBusIntegration(props: IProps) {
const [integration, setIntegration] = useState<AzureServiceBusIntegration | undefined>(undefined); const [integration, setIntegration] = useState<AzureServiceBusIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetAzureServiceBusIntegrationRequest(); const req = new GetAzureServiceBusIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getAzureServiceBusIntegration(req, (resp: GetAzureServiceBusIntegrationResponse) => { ApplicationStore.getAzureServiceBusIntegration(req, (resp: GetAzureServiceBusIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditAzureServiceBusIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: AzureServiceBusIntegration) => { const onFinish = (obj: AzureServiceBusIntegration) => {
let req = new UpdateAzureServiceBusIntegrationRequest(); const req = new UpdateAzureServiceBusIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateAzureServiceBusIntegration(req, () => { ApplicationStore.updateAzureServiceBusIntegration(req, () => {

12
ui/src/views/applications/integrations/EditGcpPubSubIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
GcpPubSubIntegration, GcpPubSubIntegration,
GetGcpPubSubIntegrationRequest,
GetGcpPubSubIntegrationResponse, GetGcpPubSubIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetGcpPubSubIntegrationRequest,
UpdateGcpPubSubIntegrationRequest, UpdateGcpPubSubIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditGcpPubSubIntegration(props: IProps) {
const [integration, setIntegration] = useState<GcpPubSubIntegration | undefined>(undefined); const [integration, setIntegration] = useState<GcpPubSubIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetGcpPubSubIntegrationRequest(); const req = new GetGcpPubSubIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getGcpPubSubIntegration(req, (resp: GetGcpPubSubIntegrationResponse) => { ApplicationStore.getGcpPubSubIntegration(req, (resp: GetGcpPubSubIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditGcpPubSubIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: GcpPubSubIntegration) => { const onFinish = (obj: GcpPubSubIntegration) => {
let req = new UpdateGcpPubSubIntegrationRequest(); const req = new UpdateGcpPubSubIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateGcpPubSubIntegration(req, () => { ApplicationStore.updateGcpPubSubIntegration(req, () => {

12
ui/src/views/applications/integrations/EditHttpIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
HttpIntegration, HttpIntegration,
GetHttpIntegrationRequest,
GetHttpIntegrationResponse, GetHttpIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetHttpIntegrationRequest,
UpdateHttpIntegrationRequest, UpdateHttpIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditHttpIntegration(props: IProps) {
const [integration, setIntegration] = useState<HttpIntegration | undefined>(undefined); const [integration, setIntegration] = useState<HttpIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetHttpIntegrationRequest(); const req = new GetHttpIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getHttpIntegration(req, (resp: GetHttpIntegrationResponse) => { ApplicationStore.getHttpIntegration(req, (resp: GetHttpIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditHttpIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: HttpIntegration) => { const onFinish = (obj: HttpIntegration) => {
let req = new UpdateHttpIntegrationRequest(); const req = new UpdateHttpIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateHttpIntegration(req, () => { ApplicationStore.updateHttpIntegration(req, () => {

12
ui/src/views/applications/integrations/EditIftttIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
IftttIntegration, IftttIntegration,
GetIftttIntegrationRequest,
GetIftttIntegrationResponse, GetIftttIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetIftttIntegrationRequest,
UpdateIftttIntegrationRequest, UpdateIftttIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -24,7 +26,7 @@ function EditIftttIntegration(props: IProps) {
const [integration, setIntegration] = useState<IftttIntegration | undefined>(undefined); const [integration, setIntegration] = useState<IftttIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetIftttIntegrationRequest(); const req = new GetIftttIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getIftttIntegration(req, (resp: GetIftttIntegrationResponse) => { ApplicationStore.getIftttIntegration(req, (resp: GetIftttIntegrationResponse) => {
@ -33,7 +35,7 @@ function EditIftttIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: IftttIntegration) => { const onFinish = (obj: IftttIntegration) => {
let req = new UpdateIftttIntegrationRequest(); const req = new UpdateIftttIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateIftttIntegration(req, () => { ApplicationStore.updateIftttIntegration(req, () => {

12
ui/src/views/applications/integrations/EditInfluxDbIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
InfluxDbIntegration, InfluxDbIntegration,
GetInfluxDbIntegrationRequest,
GetInfluxDbIntegrationResponse, GetInfluxDbIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetInfluxDbIntegrationRequest,
UpdateInfluxDbIntegrationRequest, UpdateInfluxDbIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditInfluxDbIntegration(props: IProps) {
const [integration, setIntegration] = useState<InfluxDbIntegration | undefined>(undefined); const [integration, setIntegration] = useState<InfluxDbIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetInfluxDbIntegrationRequest(); const req = new GetInfluxDbIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getInfluxDbIntegration(req, (resp: GetInfluxDbIntegrationResponse) => { ApplicationStore.getInfluxDbIntegration(req, (resp: GetInfluxDbIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditInfluxDbIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: InfluxDbIntegration) => { const onFinish = (obj: InfluxDbIntegration) => {
let req = new UpdateInfluxDbIntegrationRequest(); const req = new UpdateInfluxDbIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateInfluxDbIntegration(req, () => { ApplicationStore.updateInfluxDbIntegration(req, () => {

12
ui/src/views/applications/integrations/EditLoRaCloudIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
LoraCloudIntegration, LoraCloudIntegration,
GetLoraCloudIntegrationRequest,
GetLoraCloudIntegrationResponse, GetLoraCloudIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetLoraCloudIntegrationRequest,
UpdateLoraCloudIntegrationRequest, UpdateLoraCloudIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditLoRaCloudIntegration(props: IProps) {
const [integration, setIntegration] = useState<LoraCloudIntegration | undefined>(undefined); const [integration, setIntegration] = useState<LoraCloudIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetLoraCloudIntegrationRequest(); const req = new GetLoraCloudIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getLoraCloudIntegration(req, (resp: GetLoraCloudIntegrationResponse) => { ApplicationStore.getLoraCloudIntegration(req, (resp: GetLoraCloudIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditLoRaCloudIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: LoraCloudIntegration) => { const onFinish = (obj: LoraCloudIntegration) => {
let req = new UpdateLoraCloudIntegrationRequest(); const req = new UpdateLoraCloudIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateLoraCloudIntegration(req, () => { ApplicationStore.updateLoraCloudIntegration(req, () => {

12
ui/src/views/applications/integrations/EditMyDevicesIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
MyDevicesIntegration, MyDevicesIntegration,
GetMyDevicesIntegrationRequest,
GetMyDevicesIntegrationResponse, GetMyDevicesIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetMyDevicesIntegrationRequest,
UpdateMyDevicesIntegrationRequest, UpdateMyDevicesIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditMyDevicesIntegration(props: IProps) {
const [integration, setIntegration] = useState<MyDevicesIntegration | undefined>(undefined); const [integration, setIntegration] = useState<MyDevicesIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetMyDevicesIntegrationRequest(); const req = new GetMyDevicesIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getMyDevicesIntegration(req, (resp: GetMyDevicesIntegrationResponse) => { ApplicationStore.getMyDevicesIntegration(req, (resp: GetMyDevicesIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditMyDevicesIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: MyDevicesIntegration) => { const onFinish = (obj: MyDevicesIntegration) => {
let req = new UpdateMyDevicesIntegrationRequest(); const req = new UpdateMyDevicesIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateMyDevicesIntegration(req, () => { ApplicationStore.updateMyDevicesIntegration(req, () => {

12
ui/src/views/applications/integrations/EditPilotThingsIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
PilotThingsIntegration, PilotThingsIntegration,
GetPilotThingsIntegrationRequest,
GetPilotThingsIntegrationResponse, GetPilotThingsIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetPilotThingsIntegrationRequest,
UpdatePilotThingsIntegrationRequest, UpdatePilotThingsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditPilotThingsIntegration(props: IProps) {
const [integration, setIntegration] = useState<PilotThingsIntegration | undefined>(undefined); const [integration, setIntegration] = useState<PilotThingsIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetPilotThingsIntegrationRequest(); const req = new GetPilotThingsIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getPilotThingsIntegration(req, (resp: GetPilotThingsIntegrationResponse) => { ApplicationStore.getPilotThingsIntegration(req, (resp: GetPilotThingsIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditPilotThingsIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: PilotThingsIntegration) => { const onFinish = (obj: PilotThingsIntegration) => {
let req = new UpdatePilotThingsIntegrationRequest(); const req = new UpdatePilotThingsIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updatePilotThingsIntegration(req, () => { ApplicationStore.updatePilotThingsIntegration(req, () => {

12
ui/src/views/applications/integrations/EditThingsBoardIntegration.tsx
View File

@ -1,13 +1,15 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Card } from "antd"; import { Card } from "antd";
import { import type {
Application, Application,
ThingsBoardIntegration, ThingsBoardIntegration,
GetThingsBoardIntegrationRequest,
GetThingsBoardIntegrationResponse, GetThingsBoardIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetThingsBoardIntegrationRequest,
UpdateThingsBoardIntegrationRequest, UpdateThingsBoardIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditThingsBoardIntegration(props: IProps) {
const [integration, setIntegration] = useState<ThingsBoardIntegration | undefined>(undefined); const [integration, setIntegration] = useState<ThingsBoardIntegration | undefined>(undefined);
useEffect(() => { useEffect(() => {
let req = new GetThingsBoardIntegrationRequest(); const req = new GetThingsBoardIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.getThingsBoardIntegration(req, (resp: GetThingsBoardIntegrationResponse) => { ApplicationStore.getThingsBoardIntegration(req, (resp: GetThingsBoardIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditThingsBoardIntegration(props: IProps) {
}, [props]); }, [props]);
const onFinish = (obj: ThingsBoardIntegration) => { const onFinish = (obj: ThingsBoardIntegration) => {
let req = new UpdateThingsBoardIntegrationRequest(); const req = new UpdateThingsBoardIntegrationRequest();
req.setIntegration(obj); req.setIntegration(obj);
ApplicationStore.updateThingsBoardIntegration(req, () => { ApplicationStore.updateThingsBoardIntegration(req, () => {

9
ui/src/views/applications/integrations/GcpPubSubCard.tsx
View File

@ -3,7 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Application, DeleteGcpPubSubIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteGcpPubSubIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -14,14 +15,14 @@ interface IProps {
function GcpPubSubCard(props: IProps) { function GcpPubSubCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteGcpPubSubIntegrationRequest(); const req = new DeleteGcpPubSubIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteGcpPubSubIntegration(req, () => {}); ApplicationStore.deleteGcpPubSubIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="gcp-pub-sub/create"> <Link to="gcp-pub-sub/create">
<PlusOutlined /> <PlusOutlined />

2
ui/src/views/applications/integrations/GcpPubSubIntegrationForm.tsx
View File

@ -12,7 +12,7 @@ interface IProps {
function GcpPubSubIntegrationForm(props: IProps) { function GcpPubSubIntegrationForm(props: IProps) {
const onFinish = (values: GcpPubSubIntegration.AsObject) => { const onFinish = (values: GcpPubSubIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new GcpPubSubIntegration(); const i = new GcpPubSubIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setEncoding(v.encoding); i.setEncoding(v.encoding);

8
ui/src/views/applications/integrations/GenerateMqttCertificate.tsx
View File

@ -1,13 +1,13 @@
import React, { useState } from "react"; import { useState } from "react";
import moment from "moment"; import moment from "moment";
import { Card, Button, Form, Input } from "antd"; import { Card, Button, Form, Input } from "antd";
import { import type {
Application, Application,
GenerateMqttIntegrationClientCertificateRequest,
GenerateMqttIntegrationClientCertificateResponse, GenerateMqttIntegrationClientCertificateResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { GenerateMqttIntegrationClientCertificateRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -24,7 +24,7 @@ function GenerateMqttCertificate(props: IProps) {
const requestCertificate = () => { const requestCertificate = () => {
setButtonDisabled(true); setButtonDisabled(true);
let req = new GenerateMqttIntegrationClientCertificateRequest(); const req = new GenerateMqttIntegrationClientCertificateRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.generateMqttIntegrationClientCertificate( ApplicationStore.generateMqttIntegrationClientCertificate(

9
ui/src/views/applications/integrations/HttpCard.tsx
View File

@ -3,7 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Application, DeleteHttpIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteHttpIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -14,14 +15,14 @@ interface IProps {
function HttpCard(props: IProps) { function HttpCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteHttpIntegrationRequest(); const req = new DeleteHttpIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteHttpIntegration(req, () => {}); ApplicationStore.deleteHttpIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="http/create"> <Link to="http/create">
<PlusOutlined /> <PlusOutlined />

2
ui/src/views/applications/integrations/HttpIntegrationForm.tsx
View File

@ -13,7 +13,7 @@ interface IProps {
function HttpIntegrationForm(props: IProps) { function HttpIntegrationForm(props: IProps) {
const onFinish = (values: HttpIntegration.AsObject) => { const onFinish = (values: HttpIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new HttpIntegration(); const i = new HttpIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setEncoding(v.encoding); i.setEncoding(v.encoding);

9
ui/src/views/applications/integrations/IftttCard.tsx
View File

@ -3,7 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Application, DeleteIftttIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteIftttIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -14,14 +15,14 @@ interface IProps {
function IftttCard(props: IProps) { function IftttCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteIftttIntegrationRequest(); const req = new DeleteIftttIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteIftttIntegration(req, () => {}); ApplicationStore.deleteIftttIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="ifttt/create"> <Link to="ifttt/create">
<PlusOutlined /> <PlusOutlined />

6
ui/src/views/applications/integrations/IftttIntegrationForm.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Form, Input, AutoComplete, Button, Row, Col, Switch } from "antd"; import { Form, Input, AutoComplete, Button, Row, Col, Switch } from "antd";
@ -13,7 +13,7 @@ interface IProps {
} }
function IftttIntegrationForm(props: IProps) { function IftttIntegrationForm(props: IProps) {
const [arbitraryJson, setArbitraryJson] = useState<Boolean>(false); const [arbitraryJson, setArbitraryJson] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
setArbitraryJson(props.initialValues.getArbitraryJson()); setArbitraryJson(props.initialValues.getArbitraryJson());
@ -21,7 +21,7 @@ function IftttIntegrationForm(props: IProps) {
const onFinish = (values: IftttIntegration.AsObject) => { const onFinish = (values: IftttIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new IftttIntegration(); const i = new IftttIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setKey(v.key); i.setKey(v.key);

4
ui/src/views/applications/integrations/InfluxDbIntegrationForm.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Form, Input, Button, Select } from "antd"; import { Form, Input, Button, Select } from "antd";
@ -24,7 +24,7 @@ function InfluxDbIntegrationForm(props: IProps) {
const onFinish = (values: InfluxDbIntegration.AsObject) => { const onFinish = (values: InfluxDbIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new InfluxDbIntegration(); const i = new InfluxDbIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setVersion(v.version); i.setVersion(v.version);

9
ui/src/views/applications/integrations/InfluxdbCard.tsx
View File

@ -3,7 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Application, DeleteInfluxDbIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteInfluxDbIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -14,14 +15,14 @@ interface IProps {
function InfluxdbCard(props: IProps) { function InfluxdbCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteInfluxDbIntegrationRequest(); const req = new DeleteInfluxDbIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteInfluxDbIntegration(req, () => {}); ApplicationStore.deleteInfluxDbIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="influxdb/create"> <Link to="influxdb/create">
<PlusOutlined /> <PlusOutlined />

9
ui/src/views/applications/integrations/LoRaCloudCard.tsx
View File

@ -3,7 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Application, DeleteLoraCloudIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteLoraCloudIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -14,14 +15,14 @@ interface IProps {
function LoRaCloudCard(props: IProps) { function LoRaCloudCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteLoraCloudIntegrationRequest(); const req = new DeleteLoraCloudIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteLoraCloudIntegration(req, () => {}); ApplicationStore.deleteLoraCloudIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="loracloud/create"> <Link to="loracloud/create">
<PlusOutlined /> <PlusOutlined />

6
ui/src/views/applications/integrations/LoRaCloudIntegrationForm.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Form, Input, InputNumber, Switch, Button, Tabs, Collapse } from "antd"; import { Form, Input, InputNumber, Switch, Button, Tabs, Collapse } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@ -39,7 +39,7 @@ function LoRaCloudIntegrationForm(props: IProps) {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
const mgsv = v.modemGeolocationServices; const mgsv = v.modemGeolocationServices;
let mgs = new LoraCloudModemGeolocationServices(); const mgs = new LoraCloudModemGeolocationServices();
if (mgsv !== undefined) { if (mgsv !== undefined) {
mgs.setToken(mgsv.token); mgs.setToken(mgsv.token);
@ -59,7 +59,7 @@ function LoRaCloudIntegrationForm(props: IProps) {
mgs.setGeolocationGnssUseRxTime(mgsv.geolocationGnssUseRxTime); mgs.setGeolocationGnssUseRxTime(mgsv.geolocationGnssUseRxTime);
} }
let i = new LoraCloudIntegration(); const i = new LoraCloudIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setModemGeolocationServices(mgs); i.setModemGeolocationServices(mgs);

4
ui/src/views/applications/integrations/MqttCard.tsx
View File

@ -2,14 +2,14 @@ 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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
interface IProps { interface IProps {
application: Application; application: Application;
} }
function MqttCard(props: IProps) { function MqttCard(props: IProps) {
let actions: any[] = [<Link to="mqtt/certificate">Get certificate</Link>]; const actions = [<Link to="mqtt/certificate">Get certificate</Link>];
return ( return (
<Col span={8}> <Col span={8}>

9
ui/src/views/applications/integrations/MyDevicesCard.tsx
View File

@ -3,7 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { Application, DeleteMyDevicesIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb"; import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeleteMyDevicesIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -14,14 +15,14 @@ interface IProps {
function MyDevicesCard(props: IProps) { function MyDevicesCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteMyDevicesIntegrationRequest(); const req = new DeleteMyDevicesIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteMyDevicesIntegration(req, () => {}); ApplicationStore.deleteMyDevicesIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="mydevices/create"> <Link to="mydevices/create">
<PlusOutlined /> <PlusOutlined />

2
ui/src/views/applications/integrations/MyDevicesIntegrationForm.tsx
View File

@ -17,7 +17,7 @@ function MyDevicesIntegrationForm(props: IProps) {
const onFinish = (values: MyDevicesIntegration.AsObject) => { const onFinish = (values: MyDevicesIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new MyDevicesIntegration(); const i = new MyDevicesIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
if (v.endpoint === "custom") { if (v.endpoint === "custom") {

12
ui/src/views/applications/integrations/PilotThingsCard.tsx
View File

@ -3,10 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
Application, import { DeletePilotThingsIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
DeletePilotThingsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -17,14 +15,14 @@ interface IProps {
function PilotThingsCard(props: IProps) { function PilotThingsCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeletePilotThingsIntegrationRequest(); const req = new DeletePilotThingsIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deletePilotThingsIntegration(req, () => {}); ApplicationStore.deletePilotThingsIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="pilot-things/create"> <Link to="pilot-things/create">
<PlusOutlined /> <PlusOutlined />

2
ui/src/views/applications/integrations/PilotThingsIntegrationForm.tsx
View File

@ -12,7 +12,7 @@ interface IProps {
function PilotThingsIntegrationForm(props: IProps) { function PilotThingsIntegrationForm(props: IProps) {
const onFinish = (values: PilotThingsIntegration.AsObject) => { const onFinish = (values: PilotThingsIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new PilotThingsIntegration(); const i = new PilotThingsIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setServer(v.server); i.setServer(v.server);

12
ui/src/views/applications/integrations/ThingsBoardCard.tsx
View File

@ -3,10 +3,8 @@ 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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
Application, import { DeleteThingsBoardIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
DeleteThingsBoardIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore"; import ApplicationStore from "../../../stores/ApplicationStore";
@ -17,14 +15,14 @@ interface IProps {
function ThingsBoardCard(props: IProps) { function ThingsBoardCard(props: IProps) {
const onDelete = () => { const onDelete = () => {
let req = new DeleteThingsBoardIntegrationRequest(); const req = new DeleteThingsBoardIntegrationRequest();
req.setApplicationId(props.application.getId()); req.setApplicationId(props.application.getId());
ApplicationStore.deleteThingsBoardIntegration(req, () => {}); ApplicationStore.deleteThingsBoardIntegration(req, () => {});
}; };
let actions: any[] = []; let actions: JSX.Element[] = [];
if (!!props.add) { if (props.add) {
actions = [ actions = [
<Link to="thingsboard/create"> <Link to="thingsboard/create">
<PlusOutlined /> <PlusOutlined />

2
ui/src/views/applications/integrations/ThingsBoardIntegrationForm.tsx
View File

@ -12,7 +12,7 @@ interface IProps {
function ThingsBoardIntegrationForm(props: IProps) { function ThingsBoardIntegrationForm(props: IProps) {
const onFinish = (values: ThingsBoardIntegration.AsObject) => { const onFinish = (values: ThingsBoardIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let i = new ThingsBoardIntegration(); const i = new ThingsBoardIntegration();
i.setApplicationId(v.applicationId); i.setApplicationId(v.applicationId);
i.setServer(v.server); i.setServer(v.server);

33
ui/src/views/dashboard/Dashboard.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { presetPalettes } from "@ant-design/colors"; import { presetPalettes } from "@ant-design/colors";
@ -6,33 +6,32 @@ import { Space, Breadcrumb, Card, Row, Col, Empty } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import moment from "moment"; import moment from "moment";
import { LatLngTuple, PointTuple } from "leaflet"; import type { LatLngTuple, PointTuple } from "leaflet";
import { Popup } from "react-leaflet"; import { Popup } from "react-leaflet";
import { Doughnut } from "react-chartjs-2"; import { Doughnut } from "react-chartjs-2";
import { import type {
GetGatewaysSummaryRequest,
GetGatewaysSummaryResponse, GetGatewaysSummaryResponse,
GetDevicesSummaryRequest,
GetDevicesSummaryResponse, GetDevicesSummaryResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { import {
ListGatewaysRequest, GetGatewaysSummaryRequest,
ListGatewaysResponse, GetDevicesSummaryRequest,
GatewayListItem, } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
GatewayState,
} from "@chirpstack/chirpstack-api-grpc-web/api/gateway_pb"; import type { ListGatewaysResponse, GatewayListItem } from "@chirpstack/chirpstack-api-grpc-web/api/gateway_pb";
import { ListGatewaysRequest, GatewayState } from "@chirpstack/chirpstack-api-grpc-web/api/gateway_pb";
import InternalStore from "../../stores/InternalStore"; import InternalStore from "../../stores/InternalStore";
import GatewayStore from "../../stores/GatewayStore"; import GatewayStore from "../../stores/GatewayStore";
import Map, { Marker, MarkerColor } from "../../components/Map"; import type { MarkerColor } from "../../components/Map";
import Map, { Marker } from "../../components/Map";
function GatewaysMap() { function GatewaysMap() {
const [items, setItems] = useState<GatewayListItem[]>([]); const [items, setItems] = useState<GatewayListItem[]>([]);
useEffect(() => { useEffect(() => {
let req = new ListGatewaysRequest(); const req = new ListGatewaysRequest();
req.setLimit(9999); req.setLimit(9999);
GatewayStore.list(req, (resp: ListGatewaysResponse) => { GatewayStore.list(req, (resp: ListGatewaysResponse) => {
setItems(resp.getResultList()); setItems(resp.getResultList());
@ -49,8 +48,8 @@ function GatewaysMap() {
padding: [50, 50], padding: [50, 50],
}; };
let bounds: LatLngTuple[] = []; const bounds: LatLngTuple[] = [];
let markers: any[] = []; const markers: JSX.Element[] = [];
for (const item of items) { for (const item of items) {
const pos: LatLngTuple = [item.getLocation()!.getLatitude(), item.getLocation()!.getLongitude()]; const pos: LatLngTuple = [item.getLocation()!.getLatitude(), item.getLocation()!.getLongitude()];
@ -66,7 +65,7 @@ function GatewaysMap() {
} }
if (item.getLastSeenAt() !== undefined) { if (item.getLastSeenAt() !== undefined) {
let ts = moment(item.getLastSeenAt()!.toDate()); const ts = moment(item.getLastSeenAt()!.toDate());
lastSeen = ts.fromNow(); lastSeen = ts.fromNow();
} }
@ -186,7 +185,7 @@ function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse })
return <Empty />; return <Empty />;
} }
let data: { const data: {
labels: string[]; labels: string[];
datasets: { datasets: {
data: number[]; data: number[];

4
ui/src/views/device-profile-templates/CreateDeviceProfileTemplate.tsx
View File

@ -16,7 +16,7 @@ function CreateDeviceProfileTemplate() {
const navigate = useNavigate(); const navigate = useNavigate();
const onFinish = (obj: DeviceProfileTemplate) => { const onFinish = (obj: DeviceProfileTemplate) => {
let req = new CreateDeviceProfileTemplateRequest(); const req = new CreateDeviceProfileTemplateRequest();
req.setDeviceProfileTemplate(obj); req.setDeviceProfileTemplate(obj);
DeviceProfileTemplateStore.create(req, () => { DeviceProfileTemplateStore.create(req, () => {
@ -56,7 +56,7 @@ function CreateDeviceProfileTemplate() {
} }
`; `;
let deviceProfileTemplate = new DeviceProfileTemplate(); const deviceProfileTemplate = new DeviceProfileTemplate();
deviceProfileTemplate.setPayloadCodecScript(codecScript); deviceProfileTemplate.setPayloadCodecScript(codecScript);
deviceProfileTemplate.setSupportsOtaa(true); deviceProfileTemplate.setSupportsOtaa(true);
deviceProfileTemplate.setUplinkInterval(3600); deviceProfileTemplate.setUplinkInterval(3600);

10
ui/src/views/device-profile-templates/DeviceProfileTemplateForm.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Form, Input, Select, InputNumber, Switch, Row, Col, Button, Tabs, Card } from "antd"; import { Form, Input, Select, InputNumber, Switch, Row, Col, Button, Tabs, Card } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@ -6,7 +6,7 @@ import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { DeviceProfileTemplate } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb"; import { DeviceProfileTemplate } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
import { CodecRuntime, Measurement, MeasurementKind } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb"; import { CodecRuntime, Measurement, MeasurementKind } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
import { Region, MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb"; import { Region, MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import { ListDeviceProfileAdrAlgorithmsResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb"; import type { ListDeviceProfileAdrAlgorithmsResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
import { onFinishFailed } from "../helpers"; import { onFinishFailed } from "../helpers";
import DeviceProfileStore from "../../stores/DeviceProfileStore"; import DeviceProfileStore from "../../stores/DeviceProfileStore";
@ -34,7 +34,7 @@ function DeviceProfileTemplateForm(props: IProps) {
setPayloadCodecRuntime(v.getPayloadCodecRuntime()); setPayloadCodecRuntime(v.getPayloadCodecRuntime());
DeviceProfileStore.listAdrAlgorithms((resp: ListDeviceProfileAdrAlgorithmsResponse) => { DeviceProfileStore.listAdrAlgorithms((resp: ListDeviceProfileAdrAlgorithmsResponse) => {
let adrAlgorithms: [string, string][] = []; const adrAlgorithms: [string, string][] = [];
for (const a of resp.getResultList()) { for (const a of resp.getResultList()) {
adrAlgorithms.push([a.getId(), a.getName()]); adrAlgorithms.push([a.getId(), a.getName()]);
} }
@ -45,7 +45,7 @@ function DeviceProfileTemplateForm(props: IProps) {
const onFinish = (values: DeviceProfileTemplate.AsObject) => { const onFinish = (values: DeviceProfileTemplate.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values); const v = Object.assign(props.initialValues.toObject(), values);
let dp = new DeviceProfileTemplate(); const dp = new DeviceProfileTemplate();
dp.setId(v.id); dp.setId(v.id);
dp.setName(v.name); dp.setName(v.name);
@ -89,7 +89,7 @@ function DeviceProfileTemplateForm(props: IProps) {
// measurements // measurements
for (const elm of v.measurementsMap) { for (const elm of v.measurementsMap) {
let m = new Measurement(); const m = new Measurement();
m.setKind(elm[1].kind); m.setKind(elm[1].kind);
m.setName(elm[1].name); m.setName(elm[1].name);
dp.getMeasurementsMap().set(elm[0], m); dp.getMeasurementsMap().set(elm[0], m);

14
ui/src/views/device-profile-templates/EditDeviceProfileTemplate.tsx
View File

@ -1,14 +1,16 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useParams, Link, useNavigate } from "react-router-dom"; import { useParams, Link, useNavigate } from "react-router-dom";
import { Space, Breadcrumb, Card, Button } from "antd"; import { Space, Breadcrumb, Card, Button } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { import type {
DeviceProfileTemplate, DeviceProfileTemplate,
GetDeviceProfileTemplateRequest,
GetDeviceProfileTemplateResponse, GetDeviceProfileTemplateResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
import {
GetDeviceProfileTemplateRequest,
UpdateDeviceProfileTemplateRequest, UpdateDeviceProfileTemplateRequest,
DeleteDeviceProfileTemplateRequest, DeleteDeviceProfileTemplateRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
@ -24,7 +26,7 @@ function EditDeviceProfileTemplate() {
useEffect(() => { useEffect(() => {
const id = deviceProfileTemplateId!; const id = deviceProfileTemplateId!;
let req = new GetDeviceProfileTemplateRequest(); const req = new GetDeviceProfileTemplateRequest();
req.setId(id); req.setId(id);
DeviceProfileTemplateStore.get(req, (resp: GetDeviceProfileTemplateResponse) => { DeviceProfileTemplateStore.get(req, (resp: GetDeviceProfileTemplateResponse) => {
@ -33,7 +35,7 @@ function EditDeviceProfileTemplate() {
}, [deviceProfileTemplateId]); }, [deviceProfileTemplateId]);
const onFinish = (obj: DeviceProfileTemplate) => { const onFinish = (obj: DeviceProfileTemplate) => {
let req = new UpdateDeviceProfileTemplateRequest(); const req = new UpdateDeviceProfileTemplateRequest();
req.setDeviceProfileTemplate(obj); req.setDeviceProfileTemplate(obj);
DeviceProfileTemplateStore.update(req, () => { DeviceProfileTemplateStore.update(req, () => {
@ -42,7 +44,7 @@ function EditDeviceProfileTemplate() {
}; };
const deleteDeviceProfileTemplate = () => { const deleteDeviceProfileTemplate = () => {
let req = new DeleteDeviceProfileTemplateRequest(); const req = new DeleteDeviceProfileTemplateRequest();
req.setId(deviceProfileTemplateId!); req.setId(deviceProfileTemplateId!);
DeviceProfileTemplateStore.delete(req, () => { DeviceProfileTemplateStore.delete(req, () => {

11
ui/src/views/device-profile-templates/ListDeviceProfileTemplates.tsx
View File

@ -1,18 +1,19 @@
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Space, Breadcrumb, Button } from "antd"; import { Space, Breadcrumb, Button } from "antd";
import { ColumnsType } from "antd/es/table"; import type { ColumnsType } from "antd/es/table";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { import type {
ListDeviceProfileTemplatesRequest,
ListDeviceProfileTemplatesResponse, ListDeviceProfileTemplatesResponse,
DeviceProfileTemplateListItem, DeviceProfileTemplateListItem,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb"; } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
import { ListDeviceProfileTemplatesRequest } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
import { Region } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb"; import { Region } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import { getEnumName } from "../helpers"; import { getEnumName } from "../helpers";
import DataTable, { GetPageCallbackFunc } from "../../components/DataTable"; import type { GetPageCallbackFunc } from "../../components/DataTable";
import DataTable from "../../components/DataTable";
import DeviceProfileTemplateStore from "../../stores/DeviceProfileTemplateStore"; import DeviceProfileTemplateStore from "../../stores/DeviceProfileTemplateStore";
function ListDeviceProfileTemplates() { function ListDeviceProfileTemplates() {
@ -45,7 +46,7 @@ function ListDeviceProfileTemplates() {
]; ];
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => { const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListDeviceProfileTemplatesRequest(); const req = new ListDeviceProfileTemplatesRequest();
req.setLimit(limit); req.setLimit(limit);
req.setOffset(offset); req.setOffset(offset);

13
ui/src/views/device-profiles/CreateDeviceProfile.tsx
View File

@ -4,13 +4,10 @@ import { Space, Breadcrumb, Card } from "antd";
import { PageHeader } from "@ant-design/pro-layout"; import { PageHeader } from "@ant-design/pro-layout";
import { MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb"; import { MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import { import type { CreateDeviceProfileResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
DeviceProfile, import { DeviceProfile, CreateDeviceProfileRequest } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
CreateDeviceProfileRequest,
CreateDeviceProfileResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb"; import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import DeviceProfileForm from "./DeviceProfileForm"; import DeviceProfileForm from "./DeviceProfileForm";
import DeviceProfileStore from "../../stores/DeviceProfileStore"; import DeviceProfileStore from "../../stores/DeviceProfileStore";
@ -25,7 +22,7 @@ function CreateDeviceProfile(props: IProps) {
const onFinish = (obj: DeviceProfile) => { const onFinish = (obj: DeviceProfile) => {
obj.setTenantId(props.tenant.getId()); obj.setTenantId(props.tenant.getId());
let req = new CreateDeviceProfileRequest(); const req = new CreateDeviceProfileRequest();
req.setDeviceProfile(obj); req.setDeviceProfile(obj);
DeviceProfileStore.create(req, (_resp: CreateDeviceProfileResponse) => { DeviceProfileStore.create(req, (_resp: CreateDeviceProfileResponse) => {
@ -66,7 +63,7 @@ function CreateDeviceProfile(props: IProps) {
} }
`; `;
let deviceProfile = new DeviceProfile(); const deviceProfile = new DeviceProfile();
deviceProfile.setPayloadCodecScript(codecScript); deviceProfile.setPayloadCodecScript(codecScript);
deviceProfile.setSupportsOtaa(true); deviceProfile.setSupportsOtaa(true);
deviceProfile.setUplinkInterval(3600); deviceProfile.setUplinkInterval(3600);

Some files were not shown because too many files have changed in this diff Show More