ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2024-12-19 21:27:55 +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",
"version": "4.9.0-test.3",
"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": {
"@ant-design/colors": "^7.0.0",
"@ant-design/pro-layout": "^7.17.6",
"@ant-design/colors": "^7.1.0",
"@ant-design/icons": "^5.3.7",
"@ant-design/pro-layout": "^7.19.8",
"@chirpstack/chirpstack-api-grpc-web": "file:../api/grpc-web",
"@fortawesome/fontawesome-free": "^6.5.1",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^6.1.5",
"@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",
"@fortawesome/fontawesome-free": "^6.5.2",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"antd": "^5.19.1",
"buffer": "^6.0.3",
"chart.js": "^4.4.1",
"chart.js": "^4.4.3",
"chartjs-adapter-moment": "^1.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",
"history": "^5.3.0",
"js-file-download": "^0.4.12",
"leaflet": "^1.9.4",
"leaflet.awesome-markers": "^2.0.5",
"moment": "^2.29.4",
"react": "^18.2.0",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-chartjs-2": "^5.2.0",
"react-codemirror2": "^7.3.0",
"react-dom": "^18.2.0",
"react-json-tree": "0.18.0",
"react-codemirror2": "^8.0.0",
"react-dom": "^18.3.1",
"react-json-tree": "^0.19.0",
"react-leaflet": "^4.2.1",
"react-markdown": "^9.0.1",
"react-router-dom": "^6.20.1",
"react-scripts": "5.0.1",
"typescript": "^5.1.3",
"web-vitals": "^3.5.0"
"react-router-dom": "^6.24.1",
"web-vitals": "^4.2.1"
},
"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": {
"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 type { RouterProps } from "react-router-dom";
import { Router, Routes, Route } from "react-router-dom";
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 Menu from "./components/Menu";
@ -42,7 +44,12 @@ import SessionStore from "./stores/SessionStore";
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({
action: history.action,
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";

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

@ -36,7 +36,7 @@ function AesKeyInput(props: IProps) {
};
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);
let value = "";
@ -68,11 +68,11 @@ function AesKeyInput(props: IProps) {
};
const generateRandom = () => {
let cryptoObj = window.crypto || window.Crypto;
let b = new Uint8Array(16);
const cryptoObj = window.crypto || window.Crypto;
const b = new Uint8Array(16);
cryptoObj.getRandomValues(b);
let key = Buffer.from(b).toString("hex");
const key = Buffer.from(b).toString("hex");
setValue(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";
@ -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 });
if (onSelect !== undefined) {

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

@ -1,6 +1,7 @@
import { Form } from "antd";
import Autocomplete, { OptionCallbackFunc, OptionsCallbackFunc } from "./Autocomplete";
import type { OptionCallbackFunc, OptionsCallbackFunc } from "./Autocomplete";
import Autocomplete from "./Autocomplete";
interface IProps {
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 type { Editor, EditorChange } from "codemirror";
import { Form } from "antd";
@ -23,7 +24,7 @@ function CodeEditor(props: IProps) {
setReloadKey(k => k + 1);
}, [form, props]);
const handleChange = (editor: any, data: any, newCode: string) => {
const handleChange = (editor: Editor, data: EditorChange, newCode: string) => {
setValue(newCode);
form.setFieldsValue({
[props.name]: newCode,

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

@ -1,18 +1,19 @@
import React, { useState, useEffect, useCallback } from "react";
import { Table } from "antd";
import { ColumnsType } from "antd/es/table";
import type { ColumnsType } from "antd/es/table";
import SessionStore from "../stores/SessionStore";
export type GetPageCallbackFunc = (totalCount: number, rows: object[]) => void;
interface IProps {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
columns: ColumnsType<any>;
getPage: (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => void;
onRowsSelectChange?: (ids: string[]) => void;
rowKey: string;
refreshKey?: any;
refreshKey?: unknown;
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";
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 { 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";
@ -39,7 +40,7 @@ function DevAddrInput(props: IProps) {
};
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);
let value = "";
@ -71,7 +72,7 @@ function DevAddrInput(props: IProps) {
};
const generateRandom = () => {
let req = new GetRandomDevAddrRequest();
const req = new GetRandomDevAddrRequest();
req.setDevEui(props.devEui);
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>) => {
let v = e.target.value;
const v = e.target.value;
const match = v.match(/[A-Fa-f0-9]/g);
let value = "";
@ -68,11 +68,11 @@ function EuiInput(props: IProps) {
};
const generateRandom = () => {
let cryptoObj = window.crypto || window.Crypto;
let b = new Uint8Array(8);
const cryptoObj = window.crypto || window.Crypto;
const b = new Uint8Array(8);
cryptoObj.getRandomValues(b);
let key = Buffer.from(b).toString("hex");
const key = Buffer.from(b).toString("hex");
setValue(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 { Button, Menu, Dropdown, Input, AutoComplete } from "antd";
import { UserOutlined, DownOutlined, QuestionOutlined } from "@ant-design/icons";
import { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
import {
SettingsResponse,
GlobalSearchRequest,
GlobalSearchResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import type { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
import type { SettingsResponse, GlobalSearchResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { GlobalSearchRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import InternalStore from "../stores/InternalStore";
import SessionStore from "../stores/SessionStore";
@ -38,7 +35,7 @@ function Header({ user }: { user: User }) {
return;
}
let req = new GlobalSearchRequest();
const req = new GlobalSearchRequest();
req.setLimit(20);
req.setSearch(search);
@ -52,8 +49,8 @@ function Header({ user }: { user: User }) {
return;
}
let oidc = settings.getOpenidConnect()!;
let oAuth2 = settings.getOauth2()!;
const oidc = settings.getOpenidConnect()!;
const oAuth2 = settings.getOauth2()!;
if (oidc.getEnabled() && oidc.getLogoutUrl() !== "") {
SessionStore.logout(false, () => {
@ -74,8 +71,8 @@ function Header({ user }: { user: User }) {
return null;
}
let oidcEnabled = settings!.getOpenidConnect()!.getEnabled();
let oAuth2Enabled = settings!.getOauth2()!.getEnabled();
const oidcEnabled = settings!.getOpenidConnect()!.getEnabled();
const oAuth2Enabled = settings!.getOauth2()!.getEnabled();
const menu = (
<Menu>
@ -88,9 +85,9 @@ function Header({ user }: { user: User }) {
</Menu>
);
let options: {
label: any;
options: any[];
const options: {
label: JSX.Element;
options: ReturnType<typeof renderItem>[];
}[] = [
{
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 { 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 { 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 {
logs: LogItem[];
@ -15,17 +15,17 @@ interface IProps {
function LogTable(props: IProps) {
const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
const [body, setBody] = useState<any>(null);
const [drawerTitle, setDrawerTitle] = useState<any>(null);
const [body, setBody] = useState<string | null>(null);
const [drawerTitle, setDrawerTitle] = useState<string | null>(null);
const onDrawerClose = () => {
setDrawerOpen(false);
};
const onDrawerOpen = (time: any, body: any) => {
let ts = new Date(0);
ts.setUTCSeconds(time.seconds);
let drawerTitle = moment(ts).format("YYYY-MM-DD HH:mm:ss");
const onDrawerOpen = (time: { seconds: number } | undefined, body: string) => {
const ts = new Date(0);
ts.setUTCSeconds(time!.seconds);
const drawerTitle = moment(ts).format("YYYY-MM-DD HH:mm:ss");
return () => {
setBody(body);
@ -35,16 +35,16 @@ function LogTable(props: IProps) {
};
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 = () => {
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");
};
let items = props.logs.map((l, i) => l.toObject());
let bodyJson = JSON.parse(body);
const items = props.logs.map((l, i) => l.toObject());
const bodyJson = JSON.parse(body!);
const theme = {
scheme: "google",
@ -104,7 +104,7 @@ function LogTable(props: IProps) {
key: "time",
width: 200,
render: (text, obj) => {
let ts = new Date(0);
const ts = new Date(0);
ts.setUTCSeconds(obj.time!.seconds);
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 { 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 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 { Menu, MenuProps, Typography } from "antd";
import type { MenuProps } from "antd";
import { Menu, Typography } from "antd";
import {
CloudOutlined,
HomeOutlined,
@ -15,15 +16,13 @@ import {
RadarChartOutlined,
} from "@ant-design/icons";
import {
GetTenantResponse,
ListTenantsRequest,
ListTenantsResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import type { GetTenantResponse, ListTenantsResponse } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import { ListTenantsRequest } 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 TenantStore from "../stores/TenantStore";
import SessionStore from "../stores/SessionStore";
@ -42,7 +41,7 @@ function SideMenu() {
};
const getTenantOptions = (search: string, fn: OptionsCallbackFunc) => {
let req = new ListTenantsRequest();
const req = new ListTenantsRequest();
req.setSearch(search);
req.setLimit(10);
@ -162,7 +161,7 @@ function SideMenu() {
parseLocation();
}, [location, parseLocation]);
let items: MenuProps["items"] = [];
const items: MenuProps["items"] = [];
if (SessionStore.isAdmin()) {
items.push({

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

@ -1,11 +1,12 @@
import { Card } from "antd";
import { TimeUnit } from "chart.js";
import type { TimeUnit } from "chart.js";
import { Bar } from "react-chartjs-2";
import moment from "moment";
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 {
metric: Metric;
@ -20,7 +21,7 @@ function MetricBar(props: IProps) {
unit = "month";
}
const animation: false = false;
const animation = false as const;
const options = {
animation: animation,
@ -43,7 +44,7 @@ function MetricBar(props: IProps) {
},
};
let data: {
const data: {
labels: number[];
datasets: {
label: string;

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

@ -1,11 +1,12 @@
import { Card } from "antd";
import { TimeUnit } from "chart.js";
import type { TimeUnit } from "chart.js";
import { Line } from "react-chartjs-2";
import moment from "moment";
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 {
metric: Metric;
@ -27,7 +28,7 @@ function MetricChart(props: IProps) {
tooltipFormat = "LT";
}
const animation: false = false;
const animation = false as const;
const options = {
animation: animation,
@ -52,7 +53,7 @@ function MetricChart(props: IProps) {
};
let prevValue = 0;
let data = {
const data = {
labels: props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
datasets: props.metric
.getDatasetsList()
@ -72,7 +73,7 @@ function MetricChart(props: IProps) {
return null;
} else {
if (props.metric.getKind() === MetricKind.COUNTER) {
let val = v - prevValue;
const val = v - prevValue;
prevValue = v;
if (val < 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 { color } from "chart.js/helpers";
import { TimeUnit } from "chart.js";
import type { TimeUnit } from "chart.js";
import { Chart } from "react-chartjs-2";
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 {
metric: Metric;
@ -22,9 +25,9 @@ function MetricHeatmap(props: IProps) {
unit = "month";
}
const animation: false = false;
const animation = false as const;
let options = {
const options = {
animation: animation,
maintainAspectRatio: false,
scales: {
@ -63,13 +66,13 @@ function MetricHeatmap(props: IProps) {
},
};
let dataData: {
const dataData: {
x: number;
y: string;
v: number;
}[] = [];
let data = {
const data = {
labels: props.metric.getDatasetsList().map(v => v.getLabel()),
datasets: [
{
@ -93,8 +96,8 @@ function MetricHeatmap(props: IProps) {
const step = value - ctx.dataset.minValue;
const factor = (1 / steps) * step;
let result: [number, number, number] = ctx.dataset.fromColor.slice();
for (var i = 0; i < 3; i++) {
const result: [number, number, number] = ctx.dataset.fromColor.slice();
for (let i = 0; i < 3; 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();
for (let i = 0; i < tsList.length; i++) {
for (let ds of dsList) {
let v = ds.getDataList()[i];
for (const ds of dsList) {
const v = ds.getDataList()[i];
if (v === 0) {
continue;
}

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

@ -1,4 +1,3 @@
import React, { useState, useEffect } from "react";
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>) => {
let v = e.target.value;
const v = e.target.value;
const match = v.match(/[A-Fa-f0-9]/g);
let value = "";
@ -69,11 +68,11 @@ function RelayIdInput(props: IProps) {
};
const generateRandom = () => {
let cryptoObj = window.crypto || window.Crypto;
let b = new Uint8Array(4);
const cryptoObj = window.crypto || window.Crypto;
const b = new Uint8Array(4);
cryptoObj.getRandomValues(b);
let key = Buffer.from(b).toString("hex");
const key = Buffer.from(b).toString("hex");
setValue(key);
updateField(key);
};

6
ui/src/index.tsx
View File

@ -19,7 +19,11 @@ import "./index.css";
Chart.register(MatrixController, MatrixElement, ...registerables);
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
// 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) {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
import("web-vitals").then(({ onCLS, onFCP, onLCP, onTTFB, onINP }) => {
onCLS(onPerfEntry);
onFCP(onPerfEntry);
onLCP(onPerfEntry);
onTTFB(onPerfEntry);
onINP(onPerfEntry);
});
}
};

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

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

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

@ -2,7 +2,7 @@ import { notification } from "antd";
import { EventEmitter } from "events";
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 {
import type {
CreateDeviceProfileRequest,
CreateDeviceProfileResponse,
GetDeviceProfileRequest,

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

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

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

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

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

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

18
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 { notification } from "antd";
import { EventEmitter } from "events";
import { InternalServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/internal_grpc_web_pb";
import {
import type {
CreateApiKeyRequest,
CreateApiKeyResponse,
DeleteApiKeyRequest,
@ -56,7 +56,7 @@ class InternalStore extends EventEmitter {
};
deleteApiKey = (req: DeleteApiKeyRequest, callbackFunc: () => void) => {
this.client.deleteApiKey(req, SessionStore.getMetadata(), (err) => {
this.client.deleteApiKey(req, SessionStore.getMetadata(), err => {
if (err !== null) {
HandleError(err);
return;
@ -83,9 +83,9 @@ class InternalStore extends EventEmitter {
};
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");
stream = this.client.streamGatewayFrames(req, SessionStore.getMetadata());
@ -110,9 +110,9 @@ class InternalStore extends EventEmitter {
};
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");
stream = this.client.streamDeviceFrames(req, SessionStore.getMetadata());
@ -136,9 +136,9 @@ class InternalStore extends EventEmitter {
};
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");
stream = this.client.streamDeviceEvents(req, SessionStore.getMetadata());

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

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

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

@ -2,7 +2,7 @@ import { notification } from "antd";
import { EventEmitter } from "events";
import { RelayServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/relay_grpc_web_pb";
import {
import type {
ListRelaysRequest,
ListRelaysResponse,
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 { Metadata } from "grpc-web";
import type { Metadata } from "grpc-web";
import { EventEmitter } from "events";
import { InternalServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/internal_grpc_web_pb";
import {
LoginRequest,
import type {
UserTenantLink,
OpenIdConnectLoginRequest,
OAuth2LoginRequest,
} 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";
@ -27,8 +27,8 @@ class SessionStore extends EventEmitter {
this.fetchProfile(() => {});
}
login = (email: string, password: string, callbackFunc: any) => {
let req = new LoginRequest();
login = (email: string, password: string, callbackFunc: () => void) => {
const req = new LoginRequest();
req.setEmail(email);
req.setPassword(password);
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) => {
if (err !== null) {
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) => {
if (err !== null) {
HandleLoginError(err);
@ -83,7 +83,7 @@ class SessionStore extends EventEmitter {
};
getToken = (): string => {
let token = localStorage.getItem("token");
const token = localStorage.getItem("token");
if (token == null) {
return "";
}
@ -118,7 +118,7 @@ class SessionStore extends EventEmitter {
};
};
fetchProfile = (callbackFunc: any) => {
fetchProfile = (callbackFunc: () => void) => {
if (this.getToken() === "") {
return;
}

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

@ -1,10 +1,9 @@
import { notification } from "antd";
import { EventEmitter } from "events";
import { TenantServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_grpc_web_pb";
import {
import type {
CreateTenantRequest,
CreateTenantResponse,
GetTenantRequest,
GetTenantResponse,
UpdateTenantRequest,
ListTenantsRequest,
@ -18,6 +17,7 @@ import {
ListTenantUsersRequest,
ListTenantUsersResponse,
} 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 { HandleError } from "./helpers";
@ -47,7 +47,7 @@ class TenantStore extends EventEmitter {
};
get = (id: string, callbackFunc: (resp: GetTenantResponse) => void) => {
let req = new GetTenantRequest();
const req = new GetTenantRequest();
req.setId(id);
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 { EventEmitter } from "events";
import { UserServiceClient } from "@chirpstack/chirpstack-api-grpc-web/api/user_grpc_web_pb";
import {
import type {
CreateUserRequest,
CreateUserResponse,
GetUserRequest,

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

@ -1,5 +1,5 @@
import { notification } from "antd";
import { RpcError } from "grpc-web";
import type { RpcError } from "grpc-web";
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) {
const onFinish = (values: ApiKey.AsObject) => {
let apiKey = new ApiKey();
const apiKey = new ApiKey();
apiKey.setName(values.name);
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 { CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import type { CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
interface IProps {
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 { Space, Breadcrumb, Card } from "antd";
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 ApiKeyToken from "./ApiKeyToken";
@ -16,7 +17,7 @@ function CreateAdminApiKey() {
const onFinish = (obj: ApiKey) => {
obj.setIsAdmin(true);
let req = new CreateApiKeyRequest();
const req = new CreateApiKeyRequest();
req.setApiKey(obj);
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 { Space, Breadcrumb, Card } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { ApiKey, CreateApiKeyRequest, CreateApiKeyResponse } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_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 type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import ApiKeyForm from "./ApiKeyForm";
import ApiKeyToken from "./ApiKeyToken";
@ -21,7 +22,7 @@ function CreateTenantApiKey(props: IProps) {
const onFinish = (obj: ApiKey) => {
obj.setTenantId(props.tenant.getId());
let req = new CreateApiKeyRequest();
const req = new CreateApiKeyRequest();
req.setApiKey(obj);
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 { DeleteOutlined } from "@ant-design/icons";
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 {
ListApiKeysRequest,
ListApiKeysResponse,
DeleteApiKeyRequest,
ApiKey,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import type { ListApiKeysResponse, ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { ListApiKeysRequest, DeleteApiKeyRequest } 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 DeleteConfirm from "../../components/DeleteConfirm";
@ -47,7 +44,7 @@ function ListAdminApiKeys() {
const deleteApiKey = (id: string): (() => void) => {
return () => {
let req = new DeleteApiKeyRequest();
const req = new DeleteApiKeyRequest();
req.setId(id);
InternalStore.deleteApiKey(req, () => {
@ -58,7 +55,7 @@ function ListAdminApiKeys() {
};
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApiKeysRequest();
const req = new ListApiKeysRequest();
req.setLimit(limit);
req.setOffset(offset);
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 { DeleteOutlined } from "@ant-design/icons";
import { Space, Breadcrumb, Button } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { ColumnsType } from "antd/es/table";
import type { ColumnsType } from "antd/es/table";
import {
ListApiKeysRequest,
ListApiKeysResponse,
DeleteApiKeyRequest,
ApiKey,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import type { ListApiKeysResponse, ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { ListApiKeysRequest, DeleteApiKeyRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_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 InternalStore from "../../stores/InternalStore";
import DeleteConfirm from "../../components/DeleteConfirm";
import Admin from "../../components/Admin";
@ -55,7 +52,7 @@ function ListTenantApiKeys(props: IProps) {
const deleteApiKey = (id: string): (() => void) => {
return () => {
let req = new DeleteApiKeyRequest();
const req = new DeleteApiKeyRequest();
req.setId(id);
InternalStore.deleteApiKey(req, () => {
@ -66,7 +63,7 @@ function ListTenantApiKeys(props: IProps) {
};
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApiKeysRequest();
const req = new ListApiKeysRequest();
req.setLimit(limit);
req.setOffset(offset);
req.setTenantId(props.tenant.getId());

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

@ -13,7 +13,7 @@ interface IProps {
function ApplicationForm(props: IProps) {
const onFinish = (values: Application.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let app = new Application();
const app = new Application();
app.setId(v.id);
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 { PageHeader } from "@ant-design/pro-layout";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import { Application, DeleteApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_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 SessionStore from "../../stores/SessionStore";
@ -49,7 +50,7 @@ function ApplicationLayout(props: IProps) {
const location = useLocation();
const deleteApplication = () => {
let req = new DeleteApplicationRequest();
const req = new DeleteApplicationRequest();
req.setId(props.application.getId());
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 { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import {
Application,
GetApplicationRequest,
GetApplicationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import type { Application, GetApplicationResponse } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { GetApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../stores/ApplicationStore";
import ApplicationLayout from "./ApplicationLayout";
@ -27,7 +24,7 @@ function ApplicationLoader(props: IProps) {
useEffect(() => {
const loadApplication = () => {
let req = new GetApplicationRequest();
const req = new GetApplicationRequest();
req.setId(applicationId!);
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 { PageHeader } from "@ant-design/pro-layout";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import {
Application,
CreateApplicationRequest,
CreateApplicationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import type { CreateApplicationResponse } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { Application, CreateApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationForm from "./ApplicationForm";
import ApplicationStore from "../../stores/ApplicationStore";
@ -23,7 +20,7 @@ function CreateApplication(props: IProps) {
const onFinish = (obj: Application) => {
obj.setTenantId(props.tenant.getId());
let req = new CreateApplicationRequest();
const req = new CreateApplicationRequest();
req.setApplication(obj);
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 { 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 ApplicationForm from "./ApplicationForm";
@ -14,7 +15,7 @@ function EditApplication(props: IProps) {
const navigate = useNavigate();
const onFinish = (obj: Application) => {
let req = new UpdateApplicationRequest();
const req = new UpdateApplicationRequest();
req.setApplication(obj);
ApplicationStore.update(req, () => {

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

@ -1,17 +1,18 @@
import { Link } from "react-router-dom";
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 {
ListApplicationsRequest,
import type {
ListApplicationsResponse,
ApplicationListItem,
} 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 Admin from "../../components/Admin";
@ -36,7 +37,7 @@ function ListApplications(props: IProps) {
];
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApplicationsRequest();
const req = new ListApplicationsRequest();
req.setTenantId(props.tenant.getId());
req.setLimit(limit);
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 {
import type {
Application,
ListIntegrationsRequest,
ListIntegrationsResponse,
IntegrationListItem,
IntegrationKind,
} 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 HttpCard from "./integrations/HttpCard";
@ -28,20 +27,20 @@ interface IProps {
}
function ListIntegrations(props: IProps) {
const [configured, setConfigured] = useState<any[]>([]);
const [available, setAvailable] = useState<any[]>([]);
const [configured, setConfigured] = useState<JSX.Element[]>([]);
const [available, setAvailable] = useState<JSX.Element[]>([]);
useEffect(() => {
const loadIntegrations = () => {
let req = new ListIntegrationsRequest();
const req = new ListIntegrationsRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.listIntegrations(req, (resp: ListIntegrationsResponse) => {
let configured: any[] = [];
let available: any[] = [];
const configured: JSX.Element[] = [];
const available: JSX.Element[] = [];
const includes = (integrations: IntegrationListItem[], kind: IntegrationKind) => {
for (let x of integrations) {
for (const x of integrations) {
if (x.getKind() === kind) {
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 { 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";
@ -14,15 +15,15 @@ interface IProps {
function AwsSns(props: IProps) {
const onDelete = () => {
let req = new DeleteAwsSnsIntegrationRequest();
const req = new DeleteAwsSnsIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deleteAwsSnsIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="aws-sns/create">
<PlusOutlined />

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

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

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

@ -12,7 +12,7 @@ interface IProps {
function AzureServiceBusIntegrationForm(props: IProps) {
const onFinish = (values: AzureServiceBusIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let i = new AzureServiceBusIntegration();
const i = new AzureServiceBusIntegration();
i.setApplicationId(v.applicationId);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
AwsSnsIntegration,
CreateAwsSnsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateAwsSnsIntegration(props: IProps) {
const onFinish = (obj: AwsSnsIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateAwsSnsIntegrationRequest();
const req = new CreateAwsSnsIntegrationRequest();
req.setIntegration(obj);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
AzureServiceBusIntegration,
CreateAzureServiceBusIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateAzureServiceBusIntegration(props: IProps) {
const onFinish = (obj: AzureServiceBusIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateAzureServiceBusIntegrationRequest();
const req = new CreateAzureServiceBusIntegrationRequest();
req.setIntegration(obj);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
GcpPubSubIntegration,
CreateGcpPubSubIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateGcpPubSubIntegration(props: IProps) {
const onFinish = (obj: GcpPubSubIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateGcpPubSubIntegrationRequest();
const req = new CreateGcpPubSubIntegrationRequest();
req.setIntegration(obj);
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 {
Application,
HttpIntegration,
CreateHttpIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { HttpIntegration, CreateHttpIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import HttpIntegrationForm from "./HttpIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
@ -21,7 +18,7 @@ function CreateHttpIntegration(props: IProps) {
const onFinish = (obj: HttpIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateHttpIntegrationRequest();
const req = new CreateHttpIntegrationRequest();
req.setIntegration(obj);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
IftttIntegration,
CreateIftttIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -22,7 +22,7 @@ function CreateIftttIntegration(props: IProps) {
const onFinish = (obj: IftttIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateIftttIntegrationRequest();
const req = new CreateIftttIntegrationRequest();
req.setIntegration(obj);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
InfluxDbIntegration,
CreateInfluxDbIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateInfluxDbIntegration(props: IProps) {
const onFinish = (obj: InfluxDbIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateInfluxDbIntegrationRequest();
const req = new CreateInfluxDbIntegrationRequest();
req.setIntegration(obj);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
LoraCloudIntegration,
LoraCloudModemGeolocationServices,
CreateLoraCloudIntegrationRequest,
@ -22,7 +22,7 @@ function CreateLoRaCloudIntegration(props: IProps) {
const onFinish = (obj: LoraCloudIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateLoraCloudIntegrationRequest();
const req = new CreateLoraCloudIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createLoraCloudIntegration(req, () => {
@ -30,8 +30,8 @@ function CreateLoRaCloudIntegration(props: IProps) {
});
};
let i = new LoraCloudIntegration();
let mgs = new LoraCloudModemGeolocationServices();
const i = new LoraCloudIntegration();
const mgs = new LoraCloudModemGeolocationServices();
mgs.setModemEnabled(true);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
MyDevicesIntegration,
CreateMyDevicesIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateMyDevicesIntegration(props: IProps) {
const onFinish = (obj: MyDevicesIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateMyDevicesIntegrationRequest();
const req = new CreateMyDevicesIntegrationRequest();
req.setIntegration(obj);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
PilotThingsIntegration,
CreatePilotThingsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreatePilotThingsIntegration(props: IProps) {
const onFinish = (obj: PilotThingsIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreatePilotThingsIntegrationRequest();
const req = new CreatePilotThingsIntegrationRequest();
req.setIntegration(obj);
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 type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
Application,
ThingsBoardIntegration,
CreateThingsBoardIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -21,7 +21,7 @@ function CreateThingsBoardIntegration(props: IProps) {
const onFinish = (obj: ThingsBoardIntegration) => {
obj.setApplicationId(props.application.getId());
let req = new CreateThingsBoardIntegrationRequest();
const req = new CreateThingsBoardIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
AwsSnsIntegration,
GetAwsSnsIntegrationRequest,
GetAwsSnsIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetAwsSnsIntegrationRequest,
UpdateAwsSnsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditAwsSnsIntegration(props: IProps) {
const [integration, setIntegration] = useState<AwsSnsIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetAwsSnsIntegrationRequest();
const req = new GetAwsSnsIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getAwsSnsIntegration(req, (resp: GetAwsSnsIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditAwsSnsIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: AwsSnsIntegration) => {
let req = new UpdateAwsSnsIntegrationRequest();
const req = new UpdateAwsSnsIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
AzureServiceBusIntegration,
GetAzureServiceBusIntegrationRequest,
GetAzureServiceBusIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetAzureServiceBusIntegrationRequest,
UpdateAzureServiceBusIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditAzureServiceBusIntegration(props: IProps) {
const [integration, setIntegration] = useState<AzureServiceBusIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetAzureServiceBusIntegrationRequest();
const req = new GetAzureServiceBusIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getAzureServiceBusIntegration(req, (resp: GetAzureServiceBusIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditAzureServiceBusIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: AzureServiceBusIntegration) => {
let req = new UpdateAzureServiceBusIntegrationRequest();
const req = new UpdateAzureServiceBusIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
GcpPubSubIntegration,
GetGcpPubSubIntegrationRequest,
GetGcpPubSubIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetGcpPubSubIntegrationRequest,
UpdateGcpPubSubIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditGcpPubSubIntegration(props: IProps) {
const [integration, setIntegration] = useState<GcpPubSubIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetGcpPubSubIntegrationRequest();
const req = new GetGcpPubSubIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getGcpPubSubIntegration(req, (resp: GetGcpPubSubIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditGcpPubSubIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: GcpPubSubIntegration) => {
let req = new UpdateGcpPubSubIntegrationRequest();
const req = new UpdateGcpPubSubIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
HttpIntegration,
GetHttpIntegrationRequest,
GetHttpIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetHttpIntegrationRequest,
UpdateHttpIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditHttpIntegration(props: IProps) {
const [integration, setIntegration] = useState<HttpIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetHttpIntegrationRequest();
const req = new GetHttpIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getHttpIntegration(req, (resp: GetHttpIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditHttpIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: HttpIntegration) => {
let req = new UpdateHttpIntegrationRequest();
const req = new UpdateHttpIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
IftttIntegration,
GetIftttIntegrationRequest,
GetIftttIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetIftttIntegrationRequest,
UpdateIftttIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -24,7 +26,7 @@ function EditIftttIntegration(props: IProps) {
const [integration, setIntegration] = useState<IftttIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetIftttIntegrationRequest();
const req = new GetIftttIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getIftttIntegration(req, (resp: GetIftttIntegrationResponse) => {
@ -33,7 +35,7 @@ function EditIftttIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: IftttIntegration) => {
let req = new UpdateIftttIntegrationRequest();
const req = new UpdateIftttIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
InfluxDbIntegration,
GetInfluxDbIntegrationRequest,
GetInfluxDbIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetInfluxDbIntegrationRequest,
UpdateInfluxDbIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditInfluxDbIntegration(props: IProps) {
const [integration, setIntegration] = useState<InfluxDbIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetInfluxDbIntegrationRequest();
const req = new GetInfluxDbIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getInfluxDbIntegration(req, (resp: GetInfluxDbIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditInfluxDbIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: InfluxDbIntegration) => {
let req = new UpdateInfluxDbIntegrationRequest();
const req = new UpdateInfluxDbIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
LoraCloudIntegration,
GetLoraCloudIntegrationRequest,
GetLoraCloudIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetLoraCloudIntegrationRequest,
UpdateLoraCloudIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditLoRaCloudIntegration(props: IProps) {
const [integration, setIntegration] = useState<LoraCloudIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetLoraCloudIntegrationRequest();
const req = new GetLoraCloudIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getLoraCloudIntegration(req, (resp: GetLoraCloudIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditLoRaCloudIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: LoraCloudIntegration) => {
let req = new UpdateLoraCloudIntegrationRequest();
const req = new UpdateLoraCloudIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
MyDevicesIntegration,
GetMyDevicesIntegrationRequest,
GetMyDevicesIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetMyDevicesIntegrationRequest,
UpdateMyDevicesIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditMyDevicesIntegration(props: IProps) {
const [integration, setIntegration] = useState<MyDevicesIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetMyDevicesIntegrationRequest();
const req = new GetMyDevicesIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getMyDevicesIntegration(req, (resp: GetMyDevicesIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditMyDevicesIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: MyDevicesIntegration) => {
let req = new UpdateMyDevicesIntegrationRequest();
const req = new UpdateMyDevicesIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
PilotThingsIntegration,
GetPilotThingsIntegrationRequest,
GetPilotThingsIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetPilotThingsIntegrationRequest,
UpdatePilotThingsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditPilotThingsIntegration(props: IProps) {
const [integration, setIntegration] = useState<PilotThingsIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetPilotThingsIntegrationRequest();
const req = new GetPilotThingsIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getPilotThingsIntegration(req, (resp: GetPilotThingsIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditPilotThingsIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: PilotThingsIntegration) => {
let req = new UpdatePilotThingsIntegrationRequest();
const req = new UpdatePilotThingsIntegrationRequest();
req.setIntegration(obj);
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 { Card } from "antd";
import {
import type {
Application,
ThingsBoardIntegration,
GetThingsBoardIntegrationRequest,
GetThingsBoardIntegrationResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import {
GetThingsBoardIntegrationRequest,
UpdateThingsBoardIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@ -23,7 +25,7 @@ function EditThingsBoardIntegration(props: IProps) {
const [integration, setIntegration] = useState<ThingsBoardIntegration | undefined>(undefined);
useEffect(() => {
let req = new GetThingsBoardIntegrationRequest();
const req = new GetThingsBoardIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.getThingsBoardIntegration(req, (resp: GetThingsBoardIntegrationResponse) => {
@ -32,7 +34,7 @@ function EditThingsBoardIntegration(props: IProps) {
}, [props]);
const onFinish = (obj: ThingsBoardIntegration) => {
let req = new UpdateThingsBoardIntegrationRequest();
const req = new UpdateThingsBoardIntegrationRequest();
req.setIntegration(obj);
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 { 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";
@ -14,14 +15,14 @@ interface IProps {
function GcpPubSubCard(props: IProps) {
const onDelete = () => {
let req = new DeleteGcpPubSubIntegrationRequest();
const req = new DeleteGcpPubSubIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deleteGcpPubSubIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="gcp-pub-sub/create">
<PlusOutlined />

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

@ -12,7 +12,7 @@ interface IProps {
function GcpPubSubIntegrationForm(props: IProps) {
const onFinish = (values: GcpPubSubIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let i = new GcpPubSubIntegration();
const i = new GcpPubSubIntegration();
i.setApplicationId(v.applicationId);
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 { Card, Button, Form, Input } from "antd";
import {
import type {
Application,
GenerateMqttIntegrationClientCertificateRequest,
GenerateMqttIntegrationClientCertificateResponse,
} 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";
@ -24,7 +24,7 @@ function GenerateMqttCertificate(props: IProps) {
const requestCertificate = () => {
setButtonDisabled(true);
let req = new GenerateMqttIntegrationClientCertificateRequest();
const req = new GenerateMqttIntegrationClientCertificateRequest();
req.setApplicationId(props.application.getId());
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 { 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";
@ -14,14 +15,14 @@ interface IProps {
function HttpCard(props: IProps) {
const onDelete = () => {
let req = new DeleteHttpIntegrationRequest();
const req = new DeleteHttpIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deleteHttpIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="http/create">
<PlusOutlined />

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

@ -13,7 +13,7 @@ interface IProps {
function HttpIntegrationForm(props: IProps) {
const onFinish = (values: HttpIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let i = new HttpIntegration();
const i = new HttpIntegration();
i.setApplicationId(v.applicationId);
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 { 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";
@ -14,14 +15,14 @@ interface IProps {
function IftttCard(props: IProps) {
const onDelete = () => {
let req = new DeleteIftttIntegrationRequest();
const req = new DeleteIftttIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deleteIftttIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="ifttt/create">
<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";
@ -13,7 +13,7 @@ interface IProps {
}
function IftttIntegrationForm(props: IProps) {
const [arbitraryJson, setArbitraryJson] = useState<Boolean>(false);
const [arbitraryJson, setArbitraryJson] = useState<boolean>(false);
useEffect(() => {
setArbitraryJson(props.initialValues.getArbitraryJson());
@ -21,7 +21,7 @@ function IftttIntegrationForm(props: IProps) {
const onFinish = (values: IftttIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let i = new IftttIntegration();
const i = new IftttIntegration();
i.setApplicationId(v.applicationId);
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";
@ -24,7 +24,7 @@ function InfluxDbIntegrationForm(props: IProps) {
const onFinish = (values: InfluxDbIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let i = new InfluxDbIntegration();
const i = new InfluxDbIntegration();
i.setApplicationId(v.applicationId);
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 { 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";
@ -14,14 +15,14 @@ interface IProps {
function InfluxdbCard(props: IProps) {
const onDelete = () => {
let req = new DeleteInfluxDbIntegrationRequest();
const req = new DeleteInfluxDbIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deleteInfluxDbIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="influxdb/create">
<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 { 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";
@ -14,14 +15,14 @@ interface IProps {
function LoRaCloudCard(props: IProps) {
const onDelete = () => {
let req = new DeleteLoraCloudIntegrationRequest();
const req = new DeleteLoraCloudIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deleteLoraCloudIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="loracloud/create">
<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 { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@ -39,7 +39,7 @@ function LoRaCloudIntegrationForm(props: IProps) {
const v = Object.assign(props.initialValues.toObject(), values);
const mgsv = v.modemGeolocationServices;
let mgs = new LoraCloudModemGeolocationServices();
const mgs = new LoraCloudModemGeolocationServices();
if (mgsv !== undefined) {
mgs.setToken(mgsv.token);
@ -59,7 +59,7 @@ function LoRaCloudIntegrationForm(props: IProps) {
mgs.setGeolocationGnssUseRxTime(mgsv.geolocationGnssUseRxTime);
}
let i = new LoraCloudIntegration();
const i = new LoraCloudIntegration();
i.setApplicationId(v.applicationId);
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 { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
interface IProps {
application: Application;
}
function MqttCard(props: IProps) {
let actions: any[] = [<Link to="mqtt/certificate">Get certificate</Link>];
const actions = [<Link to="mqtt/certificate">Get certificate</Link>];
return (
<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 { 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";
@ -14,14 +15,14 @@ interface IProps {
function MyDevicesCard(props: IProps) {
const onDelete = () => {
let req = new DeleteMyDevicesIntegrationRequest();
const req = new DeleteMyDevicesIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deleteMyDevicesIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="mydevices/create">
<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 v = Object.assign(props.initialValues.toObject(), values);
let i = new MyDevicesIntegration();
const i = new MyDevicesIntegration();
i.setApplicationId(v.applicationId);
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 { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import {
Application,
DeletePilotThingsIntegrationRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import type { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { DeletePilotThingsIntegrationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import ApplicationStore from "../../../stores/ApplicationStore";
@ -17,14 +15,14 @@ interface IProps {
function PilotThingsCard(props: IProps) {
const onDelete = () => {
let req = new DeletePilotThingsIntegrationRequest();
const req = new DeletePilotThingsIntegrationRequest();
req.setApplicationId(props.application.getId());
ApplicationStore.deletePilotThingsIntegration(req, () => {});
};
let actions: any[] = [];
let actions: JSX.Element[] = [];
if (!!props.add) {
if (props.add) {
actions = [
<Link to="pilot-things/create">
<PlusOutlined />

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

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

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

@ -12,7 +12,7 @@ interface IProps {
function ThingsBoardIntegrationForm(props: IProps) {
const onFinish = (values: ThingsBoardIntegration.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let i = new ThingsBoardIntegration();
const i = new ThingsBoardIntegration();
i.setApplicationId(v.applicationId);
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 { 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 moment from "moment";
import { LatLngTuple, PointTuple } from "leaflet";
import type { LatLngTuple, PointTuple } from "leaflet";
import { Popup } from "react-leaflet";
import { Doughnut } from "react-chartjs-2";
import {
GetGatewaysSummaryRequest,
import type {
GetGatewaysSummaryResponse,
GetDevicesSummaryRequest,
GetDevicesSummaryResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import {
ListGatewaysRequest,
ListGatewaysResponse,
GatewayListItem,
GatewayState,
} from "@chirpstack/chirpstack-api-grpc-web/api/gateway_pb";
GetGatewaysSummaryRequest,
GetDevicesSummaryRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_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 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() {
const [items, setItems] = useState<GatewayListItem[]>([]);
useEffect(() => {
let req = new ListGatewaysRequest();
const req = new ListGatewaysRequest();
req.setLimit(9999);
GatewayStore.list(req, (resp: ListGatewaysResponse) => {
setItems(resp.getResultList());
@ -49,8 +48,8 @@ function GatewaysMap() {
padding: [50, 50],
};
let bounds: LatLngTuple[] = [];
let markers: any[] = [];
const bounds: LatLngTuple[] = [];
const markers: JSX.Element[] = [];
for (const item of items) {
const pos: LatLngTuple = [item.getLocation()!.getLatitude(), item.getLocation()!.getLongitude()];
@ -66,7 +65,7 @@ function GatewaysMap() {
}
if (item.getLastSeenAt() !== undefined) {
let ts = moment(item.getLastSeenAt()!.toDate());
const ts = moment(item.getLastSeenAt()!.toDate());
lastSeen = ts.fromNow();
}
@ -186,7 +185,7 @@ function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse })
return <Empty />;
}
let data: {
const data: {
labels: string[];
datasets: {
data: number[];

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

@ -16,7 +16,7 @@ function CreateDeviceProfileTemplate() {
const navigate = useNavigate();
const onFinish = (obj: DeviceProfileTemplate) => {
let req = new CreateDeviceProfileTemplateRequest();
const req = new CreateDeviceProfileTemplateRequest();
req.setDeviceProfileTemplate(obj);
DeviceProfileTemplateStore.create(req, () => {
@ -56,7 +56,7 @@ function CreateDeviceProfileTemplate() {
}
`;
let deviceProfileTemplate = new DeviceProfileTemplate();
const deviceProfileTemplate = new DeviceProfileTemplate();
deviceProfileTemplate.setPayloadCodecScript(codecScript);
deviceProfileTemplate.setSupportsOtaa(true);
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 { 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 { 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 { 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 DeviceProfileStore from "../../stores/DeviceProfileStore";
@ -34,7 +34,7 @@ function DeviceProfileTemplateForm(props: IProps) {
setPayloadCodecRuntime(v.getPayloadCodecRuntime());
DeviceProfileStore.listAdrAlgorithms((resp: ListDeviceProfileAdrAlgorithmsResponse) => {
let adrAlgorithms: [string, string][] = [];
const adrAlgorithms: [string, string][] = [];
for (const a of resp.getResultList()) {
adrAlgorithms.push([a.getId(), a.getName()]);
}
@ -45,7 +45,7 @@ function DeviceProfileTemplateForm(props: IProps) {
const onFinish = (values: DeviceProfileTemplate.AsObject) => {
const v = Object.assign(props.initialValues.toObject(), values);
let dp = new DeviceProfileTemplate();
const dp = new DeviceProfileTemplate();
dp.setId(v.id);
dp.setName(v.name);
@ -89,7 +89,7 @@ function DeviceProfileTemplateForm(props: IProps) {
// measurements
for (const elm of v.measurementsMap) {
let m = new Measurement();
const m = new Measurement();
m.setKind(elm[1].kind);
m.setName(elm[1].name);
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 { Space, Breadcrumb, Card, Button } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import {
import type {
DeviceProfileTemplate,
GetDeviceProfileTemplateRequest,
GetDeviceProfileTemplateResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
import {
GetDeviceProfileTemplateRequest,
UpdateDeviceProfileTemplateRequest,
DeleteDeviceProfileTemplateRequest,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
@ -24,7 +26,7 @@ function EditDeviceProfileTemplate() {
useEffect(() => {
const id = deviceProfileTemplateId!;
let req = new GetDeviceProfileTemplateRequest();
const req = new GetDeviceProfileTemplateRequest();
req.setId(id);
DeviceProfileTemplateStore.get(req, (resp: GetDeviceProfileTemplateResponse) => {
@ -33,7 +35,7 @@ function EditDeviceProfileTemplate() {
}, [deviceProfileTemplateId]);
const onFinish = (obj: DeviceProfileTemplate) => {
let req = new UpdateDeviceProfileTemplateRequest();
const req = new UpdateDeviceProfileTemplateRequest();
req.setDeviceProfileTemplate(obj);
DeviceProfileTemplateStore.update(req, () => {
@ -42,7 +44,7 @@ function EditDeviceProfileTemplate() {
};
const deleteDeviceProfileTemplate = () => {
let req = new DeleteDeviceProfileTemplateRequest();
const req = new DeleteDeviceProfileTemplateRequest();
req.setId(deviceProfileTemplateId!);
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 { 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 {
ListDeviceProfileTemplatesRequest,
import type {
ListDeviceProfileTemplatesResponse,
DeviceProfileTemplateListItem,
} 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 { 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";
function ListDeviceProfileTemplates() {
@ -45,7 +46,7 @@ function ListDeviceProfileTemplates() {
];
const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListDeviceProfileTemplatesRequest();
const req = new ListDeviceProfileTemplatesRequest();
req.setLimit(limit);
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 { MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import {
DeviceProfile,
CreateDeviceProfileRequest,
CreateDeviceProfileResponse,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
import type { CreateDeviceProfileResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
import { DeviceProfile, CreateDeviceProfileRequest } 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 DeviceProfileStore from "../../stores/DeviceProfileStore";
@ -25,7 +22,7 @@ function CreateDeviceProfile(props: IProps) {
const onFinish = (obj: DeviceProfile) => {
obj.setTenantId(props.tenant.getId());
let req = new CreateDeviceProfileRequest();
const req = new CreateDeviceProfileRequest();
req.setDeviceProfile(obj);
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.setSupportsOtaa(true);
deviceProfile.setUplinkInterval(3600);

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