-
-
-
-
- }>
- {this.props.user.getEmail()}
-
-
-
+ return (
+
+
+
+
+
+
+
+ }>
+ {user.getEmail()}
+
+
- );
- }
+
+ );
}
-export default withRouter(Header);
+export default Header;
diff --git a/ui/src/components/LogTable.tsx b/ui/src/components/LogTable.tsx
index 3a663e9e..784533d0 100644
--- a/ui/src/components/LogTable.tsx
+++ b/ui/src/components/LogTable.tsx
@@ -1,4 +1,5 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
+
import moment from "moment";
import JSONTreeOriginal from "react-json-tree";
import fileDownload from "js-file-download";
@@ -12,160 +13,142 @@ interface IProps {
logs: LogItem[];
}
-interface IState {
- drawerOpen: boolean;
- body: any;
- drawerTitle: any;
-}
+function LogTable(props: IProps) {
+ const [drawerOpen, setDrawerOpen] = useState
(false);
+ const [body, setBody] = useState(null);
+ const [drawerTitle, setDrawerTitle] = useState(null);
-class LogTable extends Component {
- constructor(props: IProps) {
- super(props);
-
- this.state = {
- drawerOpen: false,
- body: null,
- drawerTitle: null,
- };
- }
-
- onDrawerClose = () => {
- this.setState({
- drawerOpen: false,
- });
+ const onDrawerClose = () => {
+ setDrawerOpen(false);
};
- onDrawerOpen = (time: any, body: any) => {
+ 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");
return () => {
- this.setState({
- body: body,
- drawerTitle: drawerTitle,
- drawerOpen: true,
- });
+ setBody(body);
+ setDrawerTitle(drawerTitle);
+ setDrawerOpen(true);
};
};
- downloadSingleFrame = () => {
- fileDownload(JSON.stringify(JSON.parse(this.state.body), null, 4), "single-log.json", "application/json");
+ const downloadSingleFrame = () => {
+ fileDownload(JSON.stringify(JSON.parse(body), null, 4), "single-log.json", "application/json");
};
- downloadFrames = () => {
- let items = this.props.logs.map((l, i) => JSON.parse(l.getBody()));
+ const downloadFrames = () => {
+ let items = props.logs.map((l, i) => JSON.parse(l.getBody()));
fileDownload(JSON.stringify(items, null, 4), "log.json");
};
- render() {
- let items = this.props.logs.map((l, i) => l.toObject());
- let body = JSON.parse(this.state.body);
+ let items = props.logs.map((l, i) => l.toObject());
+ let bodyJson = JSON.parse(body);
- const theme = {
- scheme: "google",
- author: "seth wright (http://sethawright.com)",
- base00: "#000000",
- base01: "#282a2e",
- base02: "#373b41",
- base03: "#969896",
- base04: "#b4b7b4",
- base05: "#c5c8c6",
- base06: "#e0e0e0",
- base07: "#ffffff",
- base08: "#CC342B",
- base09: "#F96A38",
- base0A: "#FBA922",
- base0B: "#198844",
- base0C: "#3971ED",
- base0D: "#3971ED",
- base0E: "#A36AC7",
- base0F: "#3971ED",
- };
+ const theme = {
+ scheme: "google",
+ author: "seth wright (http://sethawright.com)",
+ base00: "#000000",
+ base01: "#282a2e",
+ base02: "#373b41",
+ base03: "#969896",
+ base04: "#b4b7b4",
+ base05: "#c5c8c6",
+ base06: "#e0e0e0",
+ base07: "#ffffff",
+ base08: "#CC342B",
+ base09: "#F96A38",
+ base0A: "#FBA922",
+ base0B: "#198844",
+ base0C: "#3971ED",
+ base0D: "#3971ED",
+ base0E: "#A36AC7",
+ base0F: "#3971ED",
+ };
- return (
-
- Download}
- >
- {
- return true;
- }}
- />
-
- {items.length !== 0 && (
-
-
-
-
- )}
- {
- let ts = new Date(0);
- ts.setUTCSeconds(obj.time!.seconds);
- return moment(ts).format("YYYY-MM-DD HH:mm:ss");
- },
- },
- {
- title: "Type",
- dataIndex: "description",
- key: "description",
- width: 200,
- render: (text, obj) => (
- }
- type="primary"
- shape="round"
- size="small"
- onClick={this.onDrawerOpen(obj.time, obj.body)}
- >
- {text}
-
- ),
- },
- {
- title: "Properties",
- dataIndex: "properties",
- key: "properties",
- render: (text, obj) =>
- obj.propertiesMap.map((p, i) => {
- if (p[1] !== "") {
- return (
-
-
- {p[0]}: {p[1]}
-
-
- );
- }
-
- return null;
- }),
- },
- ]}
+ return (
+
+ Download}
+ >
+ {
+ return true;
+ }}
/>
-
- );
- }
+
+ {items.length !== 0 && (
+
+
+
+
+ )}
+ {
+ let ts = new Date(0);
+ ts.setUTCSeconds(obj.time!.seconds);
+ return moment(ts).format("YYYY-MM-DD HH:mm:ss");
+ },
+ },
+ {
+ title: "Type",
+ dataIndex: "description",
+ key: "description",
+ width: 200,
+ render: (text, obj) => (
+ }
+ type="primary"
+ shape="round"
+ size="small"
+ onClick={onDrawerOpen(obj.time, obj.body)}
+ >
+ {text}
+
+ ),
+ },
+ {
+ title: "Properties",
+ dataIndex: "properties",
+ key: "properties",
+ render: (text, obj) =>
+ obj.propertiesMap.map((p, i) => {
+ if (p[1] !== "") {
+ return (
+
+
+ {p[0]}: {p[1]}
+
+
+ );
+ }
+
+ return null;
+ }),
+ },
+ ]}
+ />
+
+ );
}
export default LogTable;
diff --git a/ui/src/components/Map.tsx b/ui/src/components/Map.tsx
index d61bc2e6..f38d824a 100644
--- a/ui/src/components/Map.tsx
+++ b/ui/src/components/Map.tsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { useEffect, PropsWithChildren } from "react";
import L, { LatLngTuple, FitBoundsOptions } from "leaflet";
import "leaflet.awesome-markers";
-import { MarkerProps as LMarkerProps } from "react-leaflet";
+import { MarkerProps as LMarkerProps, useMap } from "react-leaflet";
import { MapContainer, Marker as LMarker, TileLayer } from "react-leaflet";
interface IProps {
@@ -12,77 +12,48 @@ interface IProps {
boundsOptions?: FitBoundsOptions;
}
-interface IState {
- map?: L.Map;
-}
+function MapControl(props: { center?: [number, number]; bounds?: LatLngTuple[]; boundsOptions?: FitBoundsOptions }) {
+ const map = useMap();
-class Map extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- setMap = (map: L.Map) => {
- this.setState(
- {
- map: map,
- },
- () => {
- // This is needed as setMap is called after the map has been created.
- // There is a small amount of time where componentDidUpdate can't update
- // the map with the new center because setMap hasn't been called yet.
- // In such case, the map would never update to the new center.
- if (this.props.center !== undefined) {
- map.panTo(this.props.center);
- }
-
- if (this.props.bounds !== undefined) {
- map.fitBounds(this.props.bounds, this.props.boundsOptions);
- }
- },
- );
- };
-
- componentDidUpdate(oldProps: IProps) {
- if (this.props === oldProps) {
+ useEffect(() => {
+ if (map === undefined) {
return;
}
- if (this.state.map) {
- if (this.props.center !== undefined) {
- this.state.map.flyTo(this.props.center);
- }
-
- if (this.props.bounds !== undefined) {
- this.state.map.flyToBounds(this.props.bounds, this.props.boundsOptions);
- }
+ if (props.center !== undefined) {
+ map.flyTo(props.center);
}
- }
- render() {
- const style = {
- height: this.props.height,
- };
+ if (props.bounds !== undefined) {
+ map.flyToBounds(props.bounds, props.boundsOptions);
+ }
+ });
- return (
-
-
- {this.props.children}
-
- );
- }
+ return null;
+}
+
+function Map(props: PropsWithChildren) {
+ const style = {
+ height: props.height,
+ };
+
+ return (
+
+
+ {props.children}
+
+
+ );
}
export type MarkerColor =
@@ -103,22 +74,20 @@ interface MarkerProps extends LMarkerProps {
color: MarkerColor;
}
-export class Marker extends Component {
- render() {
- const { faIcon, color, position, ...otherProps } = this.props;
+export function Marker(props: MarkerProps) {
+ const { faIcon, color, position, ...otherProps } = props;
- const iconMarker = L.AwesomeMarkers.icon({
- icon: faIcon,
- prefix: "fa",
- markerColor: color,
- });
+ const iconMarker = L.AwesomeMarkers.icon({
+ icon: faIcon,
+ prefix: "fa",
+ markerColor: color,
+ });
- return (
-
- {this.props.children}
-
- );
- }
+ return (
+
+ {props.children}
+
+ );
}
export default Map;
diff --git a/ui/src/components/Menu.tsx b/ui/src/components/Menu.tsx
index 85c7a026..73da121e 100644
--- a/ui/src/components/Menu.tsx
+++ b/ui/src/components/Menu.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { withRouter, RouteComponentProps, Link } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
import { Menu, MenuProps } from "antd";
import {
@@ -24,46 +24,18 @@ import Autocomplete, { OptionCallbackFunc, OptionsCallbackFunc } from "../compon
import TenantStore from "../stores/TenantStore";
import SessionStore from "../stores/SessionStore";
-interface IState {
- tenantId: string;
- selectedKey: string;
-}
+function SideMenu() {
+ const [tenantId, setTenantId] = useState("");
+ const [selectedKey, setSelectedKey] = useState("");
-class SideMenu extends Component {
- constructor(props: RouteComponentProps) {
- super(props);
+ const location = useLocation();
+ const navigate = useNavigate();
- this.state = {
- tenantId: "",
- selectedKey: "ns-dashboard",
- };
- }
-
- componentDidMount() {
- SessionStore.on("tenant.change", this.setTenant);
- this.setTenant();
- this.parseLocation();
- }
-
- componentWillUnmount() {
- SessionStore.removeListener("tenant.change", this.setTenant);
- }
-
- componentDidUpdate(prevProps: RouteComponentProps) {
- if (this.props === prevProps) {
- return;
- }
-
- this.parseLocation();
- }
-
- setTenant = () => {
- this.setState({
- tenantId: SessionStore.getTenantId(),
- });
+ const setTenant = () => {
+ setTenantId(SessionStore.getTenantId());
};
- getTenantOptions = (search: string, fn: OptionsCallbackFunc) => {
+ const getTenantOptions = (search: string, fn: OptionsCallbackFunc) => {
let req = new ListTenantsRequest();
req.setSearch(search);
req.setLimit(10);
@@ -76,7 +48,7 @@ class SideMenu extends Component {
});
};
- getTenantOption = (id: string, fn: OptionCallbackFunc) => {
+ const getTenantOption = (id: string, fn: OptionCallbackFunc) => {
TenantStore.get(id, (resp: GetTenantResponse) => {
const tenant = resp.getTenant();
if (tenant) {
@@ -85,167 +57,208 @@ class SideMenu extends Component {
});
};
- onTenantSelect = (value: string) => {
+ const onTenantSelect = (value: string) => {
SessionStore.setTenantId(value);
- this.props.history.push(`/tenants/${value}`);
+ navigate(`/tenants/${value}`);
};
- parseLocation = () => {
- const path = this.props.history.location.pathname;
+ const parseLocation = () => {
+ const path = location.pathname;
const tenantRe = /\/tenants\/([\w-]{36})/g;
const match = tenantRe.exec(path);
- if (match !== null && this.state.tenantId !== match[1]) {
+ if (match !== null && tenantId !== match[1]) {
SessionStore.setTenantId(match[1]);
}
// ns dashboard
if (path === "/dashboard") {
- this.setState({ selectedKey: "ns-dashboard" });
+ setSelectedKey("ns-dashboard");
}
// ns tenants
if (/\/tenants(\/([\w-]{36}\/edit|create))?/g.exec(path)) {
- this.setState({ selectedKey: "ns-tenants" });
+ setSelectedKey("ns-tenants");
}
// ns tenants
if (/\/users(\/([\w-]{36}\/edit|create))?/g.exec(path)) {
- this.setState({ selectedKey: "ns-users" });
+ setSelectedKey("ns-users");
}
// ns api keys
if (/\/api-keys(\/([\w-]{36}\/edit|create))?/g.exec(path)) {
- this.setState({ selectedKey: "ns-api-keys" });
+ setSelectedKey("ns-api-keys");
}
// ns device-profile templates
if (/\/device-profile-templates(\/([\w-]{36}\/edit|create))?/g.exec(path)) {
- this.setState({ selectedKey: "ns-device-profile-templates" });
+ setSelectedKey("ns-device-profile-templates");
}
if (/\/regions.*/g.exec(path)) {
- this.setState({ selectedKey: "ns-regions" });
+ setSelectedKey("ns-regions");
}
// tenant dashboard
if (/\/tenants\/[\w-]{36}/g.exec(path)) {
- this.setState({ selectedKey: "tenant-dashboard" });
+ setSelectedKey("tenant-dashboard");
}
// tenant users
if (/\/tenants\/[\w-]{36}\/users.*/g.exec(path)) {
- this.setState({ selectedKey: "tenant-users" });
+ setSelectedKey("tenant-users");
}
// tenant api-keys
if (/\/tenants\/[\w-]{36}\/api-keys.*/g.exec(path)) {
- this.setState({ selectedKey: "tenant-api-keys" });
+ setSelectedKey("tenant-api-keys");
}
// tenant device-profiles
if (/\/tenants\/[\w-]{36}\/device-profiles.*/g.exec(path)) {
- this.setState({ selectedKey: "tenant-device-profiles" });
+ setSelectedKey("tenant-device-profiles");
}
// tenant gateways
if (/\/tenants\/[\w-]{36}\/gateways.*/g.exec(path)) {
- this.setState({ selectedKey: "tenant-gateways" });
+ setSelectedKey("tenant-gateways");
}
// tenant applications
if (/\/tenants\/[\w-]{36}\/applications.*/g.exec(path)) {
- this.setState({ selectedKey: "tenant-applications" });
+ setSelectedKey("tenant-applications");
}
};
- render() {
- const tenantId = this.state.tenantId;
- let items: MenuProps["items"] = [];
+ useEffect(() => {
+ SessionStore.on("tenant.change", setTenant);
+ setTenant();
+ parseLocation();
- if (SessionStore.isAdmin()) {
- items.push({
- key: "ns",
- label: "Network Server",
- icon: ,
- children: [
- { key: "ns-dashboard", icon: , label: Dashboard },
- { key: "ns-tenants", icon: , label: Tenants },
- { key: "ns-users", icon: , label: Users },
- { key: "ns-api-keys", icon: , label: API Keys },
- {
- key: "ns-device-profile-templates",
- icon: ,
- label: Device Profile Templates,
- },
- { key: "ns-regions", icon: , label: Regions },
- ],
- });
- } else {
- items.push({
- key: "ns",
- label: "Network Server",
- icon: ,
- children: [{ key: "ns-regions", icon: , label: Regions }],
- });
- }
+ return () => {
+ SessionStore.removeListener("tenant.change", setTenant);
+ };
+ }, []);
- if (tenantId !== "") {
- items.push({
- key: "tenant",
- label: "Tenant",
- icon: ,
- children: [
- {
- key: "tenant-dashboard",
- icon: ,
- label: Dashboard,
- },
- { key: "tenant-users", icon: , label: Users },
- {
- key: "tenant-api-keys",
- icon: ,
- label: API Keys,
- },
- {
- key: "tenant-device-profiles",
- icon: ,
- label: Device Profiles,
- },
- {
- key: "tenant-gateways",
- icon: ,
- label: Gateways,
- },
- {
- key: "tenant-applications",
- icon: ,
- label: Applications,
- },
- ],
- });
- }
+ useEffect(() => {
+ parseLocation();
+ }, [location]);
- return (
- }
- items={items}
- />
-
- );
+ let items: MenuProps["items"] = [];
+
+ if (SessionStore.isAdmin()) {
+ items.push({
+ key: "ns",
+ label: "Network Server",
+ icon: ,
+ children: [
+ {
+ key: "ns-dashboard",
+ icon: ,
+ label: Dashboard,
+ },
+ {
+ key: "ns-tenants",
+ icon: ,
+ label: Tenants,
+ },
+ {
+ key: "ns-users",
+ icon: ,
+ label: Users,
+ },
+ {
+ key: "ns-api-keys",
+ icon: ,
+ label: API Keys,
+ },
+ {
+ key: "ns-device-profile-templates",
+ icon: ,
+ label: Device Profile Templates,
+ },
+ {
+ key: "ns-regions",
+ icon: ,
+ label: Regions,
+ },
+ ],
+ });
+ } else {
+ items.push({
+ key: "ns",
+ label: "Network Server",
+ icon: ,
+ children: [
+ {
+ key: "ns-regions",
+ icon: ,
+ label: Regions,
+ },
+ ],
+ });
}
+
+ if (tenantId !== "") {
+ items.push({
+ key: "tenant",
+ label: "Tenant",
+ icon: ,
+ children: [
+ {
+ key: "tenant-dashboard",
+ icon: ,
+ label: Dashboard,
+ },
+ {
+ key: "tenant-users",
+ icon: ,
+ label: Users,
+ },
+ {
+ key: "tenant-api-keys",
+ icon: ,
+ label: API Keys,
+ },
+ {
+ key: "tenant-device-profiles",
+ icon: ,
+ label: Device Profiles,
+ },
+ {
+ key: "tenant-gateways",
+ icon: ,
+ label: Gateways,
+ },
+ {
+ key: "tenant-applications",
+ icon: ,
+ label: Applications,
+ },
+ ],
+ });
+ }
+
+ return (
+ }
+ items={items}
+ />
+
+ );
}
-export default withRouter(SideMenu);
+export default SideMenu;
diff --git a/ui/src/components/MetricBar.tsx b/ui/src/components/MetricBar.tsx
index 4e6dde65..e769e301 100644
--- a/ui/src/components/MetricBar.tsx
+++ b/ui/src/components/MetricBar.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Card } from "antd";
import { TimeUnit } from "chart.js";
@@ -13,82 +11,80 @@ interface IProps {
aggregation: Aggregation;
}
-class MetricBar extends Component {
- render() {
- let unit: TimeUnit = "hour";
- if (this.props.aggregation === Aggregation.DAY) {
- unit = "day";
- } else if (this.props.aggregation === Aggregation.MONTH) {
- unit = "month";
- }
-
- let backgroundColors = [
- "#8bc34a",
- "#ff5722",
- "#ff9800",
- "#ffc107",
- "#ffeb3b",
- "#cddc39",
- "#4caf50",
- "#009688",
- "#00bcd4",
- "#03a9f4",
- "#2196f3",
- "#3f51b5",
- "#673ab7",
- "#9c27b0",
- "#e91e63",
- ];
-
- const animation: false = false;
-
- const options = {
- animation: animation,
- plugins: {
- legend: {
- display: true,
- },
- },
- maintainAspectRatio: false,
- scales: {
- y: {
- beginAtZero: true,
- },
- x: {
- type: "time" as const,
- time: {
- unit: unit,
- },
- },
- },
- };
-
- let data: {
- labels: number[];
- datasets: {
- label: string;
- data: number[];
- backgroundColor: string;
- }[];
- } = {
- labels: this.props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
- datasets: [],
- };
-
- for (let ds of this.props.metric.getDatasetsList()) {
- data.datasets.push({
- label: ds.getLabel(),
- data: ds.getDataList(),
- backgroundColor: backgroundColors.shift()!,
- });
- }
-
- return (
-
-
-
- );
+function MetricBar(props: IProps) {
+ let unit: TimeUnit = "hour";
+ if (props.aggregation === Aggregation.DAY) {
+ unit = "day";
+ } else if (props.aggregation === Aggregation.MONTH) {
+ unit = "month";
}
+
+ let backgroundColors = [
+ "#8bc34a",
+ "#ff5722",
+ "#ff9800",
+ "#ffc107",
+ "#ffeb3b",
+ "#cddc39",
+ "#4caf50",
+ "#009688",
+ "#00bcd4",
+ "#03a9f4",
+ "#2196f3",
+ "#3f51b5",
+ "#673ab7",
+ "#9c27b0",
+ "#e91e63",
+ ];
+
+ const animation: false = false;
+
+ const options = {
+ animation: animation,
+ plugins: {
+ legend: {
+ display: true,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ },
+ x: {
+ type: "time" as const,
+ time: {
+ unit: unit,
+ },
+ },
+ },
+ };
+
+ let data: {
+ labels: number[];
+ datasets: {
+ label: string;
+ data: number[];
+ backgroundColor: string;
+ }[];
+ } = {
+ labels: props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
+ datasets: [],
+ };
+
+ for (let ds of props.metric.getDatasetsList()) {
+ data.datasets.push({
+ label: ds.getLabel(),
+ data: ds.getDataList(),
+ backgroundColor: backgroundColors.shift()!,
+ });
+ }
+
+ return (
+
+
+
+ );
}
export default MetricBar;
diff --git a/ui/src/components/MetricChart.tsx b/ui/src/components/MetricChart.tsx
index 91015ae5..45961d7d 100644
--- a/ui/src/components/MetricChart.tsx
+++ b/ui/src/components/MetricChart.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Card } from "antd";
import { TimeUnit } from "chart.js";
@@ -14,83 +12,81 @@ interface IProps {
zeroToNull?: boolean;
}
-class MetricChart extends Component {
- render() {
- let unit: TimeUnit = "hour";
- let tooltipFormat = "LT";
- if (this.props.aggregation === Aggregation.DAY) {
- unit = "day";
- tooltipFormat = "MMM Do";
- } else if (this.props.aggregation === Aggregation.MONTH) {
- unit = "month";
- tooltipFormat = "MMM YYYY";
- }
-
- const animation: false = false;
-
- const options = {
- animation: animation,
- plugins: {
- legend: {
- display: false,
- },
- },
- maintainAspectRatio: false,
- scales: {
- y: {
- beginAtZero: true,
- },
- x: {
- type: "time" as const,
- time: {
- unit: unit,
- tooltipFormat: tooltipFormat,
- },
- },
- },
- };
-
- let prevValue = 0;
- let data = {
- labels: this.props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
- datasets: this.props.metric.getDatasetsList().map(v => {
- return {
- label: v.getLabel(),
- borderColor: "rgba(33, 150, 243, 1)",
- backgroundColor: "rgba(0, 0, 0, 0)",
- lineTension: 0,
- pointBackgroundColor: "rgba(33, 150, 243, 1)",
- data: v.getDataList().map(v => {
- if (v === 0 && this.props.zeroToNull) {
- return null;
- } else {
- if (this.props.metric.getKind() === MetricKind.COUNTER) {
- let val = v - prevValue;
- prevValue = v;
- if (val < 0) {
- return 0;
- }
- return val;
- } else {
- return v;
- }
- }
- }),
- };
- }),
- };
-
- let name = this.props.metric.getName();
- if (this.props.metric.getKind() === MetricKind.COUNTER) {
- name = `${name} (per ${unit})`;
- }
-
- return (
-
-
-
- );
+function MetricChart(props: IProps) {
+ let unit: TimeUnit = "hour";
+ let tooltipFormat = "LT";
+ if (props.aggregation === Aggregation.DAY) {
+ unit = "day";
+ tooltipFormat = "MMM Do";
+ } else if (props.aggregation === Aggregation.MONTH) {
+ unit = "month";
+ tooltipFormat = "MMM YYYY";
}
+
+ const animation: false = false;
+
+ const options = {
+ animation: animation,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: true,
+ },
+ x: {
+ type: "time" as const,
+ time: {
+ unit: unit,
+ tooltipFormat: tooltipFormat,
+ },
+ },
+ },
+ };
+
+ let prevValue = 0;
+ let data = {
+ labels: props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
+ datasets: props.metric.getDatasetsList().map(v => {
+ return {
+ label: v.getLabel(),
+ borderColor: "rgba(33, 150, 243, 1)",
+ backgroundColor: "rgba(0, 0, 0, 0)",
+ lineTension: 0,
+ pointBackgroundColor: "rgba(33, 150, 243, 1)",
+ data: v.getDataList().map(v => {
+ if (v === 0 && props.zeroToNull) {
+ return null;
+ } else {
+ if (props.metric.getKind() === MetricKind.COUNTER) {
+ let val = v - prevValue;
+ prevValue = v;
+ if (val < 0) {
+ return 0;
+ }
+ return val;
+ } else {
+ return v;
+ }
+ }
+ }),
+ };
+ }),
+ };
+
+ let name = props.metric.getName();
+ if (props.metric.getKind() === MetricKind.COUNTER) {
+ name = `${name} (per ${unit})`;
+ }
+
+ return (
+
+
+
+ );
}
export default MetricChart;
diff --git a/ui/src/components/MetricHeatmap.tsx b/ui/src/components/MetricHeatmap.tsx
index 77867b10..3b741af8 100644
--- a/ui/src/components/MetricHeatmap.tsx
+++ b/ui/src/components/MetricHeatmap.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Card } from "antd";
import { color } from "chart.js/helpers";
@@ -16,138 +14,136 @@ interface IProps {
aggregation: Aggregation;
}
-class MetricHeatmap extends Component {
- render() {
- let unit: TimeUnit = "hour";
- if (this.props.aggregation === Aggregation.DAY) {
- unit = "day";
- } else if (this.props.aggregation === Aggregation.MONTH) {
- unit = "month";
- }
+function MetricHeatmap(props: IProps) {
+ let unit: TimeUnit = "hour";
+ if (props.aggregation === Aggregation.DAY) {
+ unit = "day";
+ } else if (props.aggregation === Aggregation.MONTH) {
+ unit = "month";
+ }
- const animation: false = false;
+ const animation: false = false;
- let options = {
- animation: animation,
- maintainAspectRatio: false,
- scales: {
- y: {
- type: "category" as const,
- offset: true,
- grid: {
- display: false,
- },
+ let options = {
+ animation: animation,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ type: "category" as const,
+ offset: true,
+ grid: {
+ display: false,
},
- x: {
- type: "time" as const,
- time: {
- unit: unit,
+ },
+ x: {
+ type: "time" as const,
+ time: {
+ unit: unit,
+ },
+ offset: true,
+ labels: props.metric.getTimestampsList().map(v => moment(v.toDate().valueOf())),
+ grid: {
+ display: false,
+ },
+ },
+ },
+ plugins: {
+ legend: { display: false },
+ tooltip: {
+ callbacks: {
+ title: () => {
+ return "";
},
- offset: true,
- labels: this.props.metric.getTimestampsList().map(v => moment(v.toDate().valueOf())),
- grid: {
- display: false,
+ label: (ctx: any) => {
+ const v = ctx.dataset.data[ctx.dataIndex].v;
+ return "Count: " + v;
},
},
},
- plugins: {
- legend: { display: false },
- tooltip: {
- callbacks: {
- title: () => {
- return "";
- },
- label: (ctx: any) => {
- const v = ctx.dataset.data[ctx.dataIndex].v;
- return "Count: " + v;
- },
- },
+ },
+ };
+
+ let dataData: {
+ x: number;
+ y: string;
+ v: number;
+ }[] = [];
+
+ let data = {
+ labels: props.metric.getDatasetsList().map(v => v.getLabel()),
+ datasets: [
+ {
+ label: "Heatmap",
+ data: dataData,
+ minValue: -1,
+ maxValue: -1,
+ fromColor: props.fromColor.match(/\d+/g)!.map(Number),
+ toColor: props.toColor.match(/\d+/g)!.map(Number),
+ backgroundColor: (ctx: any): string => {
+ if (
+ ctx.dataset === undefined ||
+ ctx.dataset.data === undefined ||
+ ctx.dataset.data[ctx.dataIndex] === undefined
+ ) {
+ return color("white").rgbString();
+ }
+
+ const value = ctx.dataset.data[ctx.dataIndex].v;
+ const steps = ctx.dataset.maxValue - ctx.dataset.minValue + 1;
+ const step = value - ctx.dataset.minValue;
+ const factor = (1 / steps) * step;
+
+ let result: [number, number, number] = ctx.dataset.fromColor.slice();
+ for (var i = 0; i < 3; i++) {
+ result[i] = Math.round(result[i] + factor * (ctx.dataset.toColor[i] - ctx.dataset.fromColor[i]));
+ }
+
+ return color(result).rgbString();
+ },
+ borderWidth: 0,
+ width: (ctx: any) => {
+ return (ctx.chart.chartArea || {}).width / props.metric.getTimestampsList().length - 1;
+ },
+ height: (ctx: any) => {
+ return (ctx.chart.chartArea || {}).height / props.metric.getDatasetsList().length - 1;
},
},
- };
+ ],
+ };
- let dataData: {
- x: number;
- y: string;
- v: number;
- }[] = [];
+ data.labels.sort();
- let data = {
- labels: this.props.metric.getDatasetsList().map(v => v.getLabel()),
- datasets: [
- {
- label: "Heatmap",
- data: dataData,
- minValue: -1,
- maxValue: -1,
- fromColor: this.props.fromColor.match(/\d+/g)!.map(Number),
- toColor: this.props.toColor.match(/\d+/g)!.map(Number),
- backgroundColor: (ctx: any): string => {
- if (
- ctx.dataset === undefined ||
- ctx.dataset.data === undefined ||
- ctx.dataset.data[ctx.dataIndex] === undefined
- ) {
- return color("white").rgbString();
- }
+ const tsList = props.metric.getTimestampsList();
+ const dsList = props.metric.getDatasetsList();
- const value = ctx.dataset.data[ctx.dataIndex].v;
- const steps = ctx.dataset.maxValue - ctx.dataset.minValue + 1;
- const step = value - ctx.dataset.minValue;
- const factor = (1 / steps) * step;
+ for (let i = 0; i < tsList.length; i++) {
+ for (let ds of dsList) {
+ let v = ds.getDataList()[i];
+ if (v === 0) {
+ continue;
+ }
- let result: [number, number, number] = ctx.dataset.fromColor.slice();
- for (var i = 0; i < 3; i++) {
- result[i] = Math.round(result[i] + factor * (ctx.dataset.toColor[i] - ctx.dataset.fromColor[i]));
- }
+ data.datasets[0].data.push({
+ x: moment(tsList[i].toDate()).valueOf(),
+ y: ds.getLabel(),
+ v: v,
+ });
- return color(result).rgbString();
- },
- borderWidth: 0,
- width: (ctx: any) => {
- return (ctx.chart.chartArea || {}).width / this.props.metric.getTimestampsList().length - 1;
- },
- height: (ctx: any) => {
- return (ctx.chart.chartArea || {}).height / this.props.metric.getDatasetsList().length - 1;
- },
- },
- ],
- };
+ if (data.datasets[0].minValue === -1 || data.datasets[0].minValue > v) {
+ data.datasets[0].minValue = v;
+ }
- data.labels.sort();
-
- const tsList = this.props.metric.getTimestampsList();
- const dsList = this.props.metric.getDatasetsList();
-
- for (let i = 0; i < tsList.length; i++) {
- for (let ds of dsList) {
- let v = ds.getDataList()[i];
- if (v === 0) {
- continue;
- }
-
- data.datasets[0].data.push({
- x: moment(tsList[i].toDate()).valueOf(),
- y: ds.getLabel(),
- v: v,
- });
-
- if (data.datasets[0].minValue === -1 || data.datasets[0].minValue > v) {
- data.datasets[0].minValue = v;
- }
-
- if (data.datasets[0].maxValue < v) {
- data.datasets[0].maxValue = v;
- }
+ if (data.datasets[0].maxValue < v) {
+ data.datasets[0].maxValue = v;
}
}
-
- return (
-
-
-
- );
}
+
+ return (
+
+
+
+ );
}
export default MetricHeatmap;
diff --git a/ui/src/index.css b/ui/src/index.css
index 026e1317..f6c07a9c 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -31,7 +31,7 @@
padding-top: 85px;
overflow: auto;
- position: fixed;
+ position: fixed !important;
height: 100vh;
left: 0;
}
@@ -117,5 +117,10 @@ pre {
}
.ant-drawer-body {
- padding-bottom: 88px; /* 64 + 24 */
+ padding-bottom: 88px;
+ /* 64 + 24 */
+}
+
+.input-code input {
+ font-family: monospace !important;
}
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index a7f1d607..965fbc9e 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -1,7 +1,6 @@
import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
-// import { Chart, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, Title } from "chart.js";
import { Chart, registerables } from "chart.js";
import { MatrixElement, MatrixController } from "chartjs-chart-matrix";
import "chartjs-adapter-moment";
@@ -9,7 +8,7 @@ import "chartjs-adapter-moment";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
-import "antd/dist/antd.min.css";
+import "antd/dist/reset.css";
import "leaflet/dist/leaflet.css";
import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
import "@fortawesome/fontawesome-free/css/all.css";
@@ -19,12 +18,8 @@ import "./index.css";
Chart.register(MatrixController, MatrixElement, ...registerables);
-ReactDOM.render(
-
-
- ,
- document.getElementById("root"),
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+root.render();
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
diff --git a/ui/src/stores/ApplicationStore.ts b/ui/src/stores/ApplicationStore.ts
index 7fddba6c..c8e8ee9f 100644
--- a/ui/src/stores/ApplicationStore.ts
+++ b/ui/src/stores/ApplicationStore.ts
@@ -111,6 +111,8 @@ class ApplicationStore extends EventEmitter {
return;
}
+ this.emit("change");
+
notification.success({
message: "Application updated",
duration: 3,
diff --git a/ui/src/stores/RelayStore.ts b/ui/src/stores/RelayStore.ts
index 04f3deca..bb0b4484 100644
--- a/ui/src/stores/RelayStore.ts
+++ b/ui/src/stores/RelayStore.ts
@@ -31,7 +31,7 @@ class RelayStore extends EventEmitter {
callbackFunc(resp);
});
- }
+ };
addDevice = (req: AddRelayDeviceRequest, callbackFunc: () => void) => {
this.client.addDevice(req, SessionStore.getMetadata(), err => {
@@ -47,7 +47,7 @@ class RelayStore extends EventEmitter {
callbackFunc();
});
- }
+ };
removeDevice = (req: RemoveRelayDeviceRequest, callbackFunc: () => void) => {
this.client.removeDevice(req, SessionStore.getMetadata(), err => {
@@ -63,7 +63,7 @@ class RelayStore extends EventEmitter {
callbackFunc();
});
- }
+ };
listDevices = (req: ListRelayDevicesRequest, callbackFunc: (resp: ListRelayDevicesResponse) => void) => {
this.client.listDevices(req, SessionStore.getMetadata(), (err, resp) => {
@@ -74,7 +74,7 @@ class RelayStore extends EventEmitter {
callbackFunc(resp);
});
- }
+ };
}
const relayStore = new RelayStore();
diff --git a/ui/src/views/api-keys/ApiKeyForm.tsx b/ui/src/views/api-keys/ApiKeyForm.tsx
index f5726815..0b8c7bc3 100644
--- a/ui/src/views/api-keys/ApiKeyForm.tsx
+++ b/ui/src/views/api-keys/ApiKeyForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Form, Input, Button } from "antd";
import { ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
@@ -9,29 +7,25 @@ interface IProps {
onFinish: (obj: ApiKey) => void;
}
-interface IState {}
-
-class ApiKeyForm extends Component {
- onFinish = (values: ApiKey.AsObject) => {
+function ApiKeyForm(props: IProps) {
+ const onFinish = (values: ApiKey.AsObject) => {
let apiKey = new ApiKey();
apiKey.setName(values.name);
- this.props.onFinish(apiKey);
+ props.onFinish(apiKey);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default ApiKeyForm;
diff --git a/ui/src/views/api-keys/ApiKeyToken.tsx b/ui/src/views/api-keys/ApiKeyToken.tsx
index b50163c8..206723e3 100644
--- a/ui/src/views/api-keys/ApiKeyToken.tsx
+++ b/ui/src/views/api-keys/ApiKeyToken.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Input, Typography, Button, Space } from "antd";
@@ -9,23 +8,21 @@ interface IProps {
createApiKeyResponse: CreateApiKeyResponse;
}
-class ApiKeyToken extends Component {
- render() {
- return (
-
-
-
- Use the following API token when making API requests. This token can be revoked at any time by deleting it.
- Please note that this token can only be retrieved once:
-
-
-
-
-
- );
- }
+function ApiKeyToken(props: IProps) {
+ return (
+
+
+
+ Use the following API token when making API requests. This token can be revoked at any time by deleting it.
+ Please note that this token can only be retrieved once:
+
+
+
+
+
+ );
}
export default ApiKeyToken;
diff --git a/ui/src/views/api-keys/CreateAdminApiKey.tsx b/ui/src/views/api-keys/CreateAdminApiKey.tsx
index 0572a597..f9414c2a 100644
--- a/ui/src/views/api-keys/CreateAdminApiKey.tsx
+++ b/ui/src/views/api-keys/CreateAdminApiKey.tsx
@@ -1,7 +1,8 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import { Link } from "react-router-dom";
-import { Space, Breadcrumb, Card, PageHeader } from "antd";
+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";
@@ -9,61 +10,48 @@ import ApiKeyForm from "./ApiKeyForm";
import ApiKeyToken from "./ApiKeyToken";
import InternalStore from "../../stores/InternalStore";
-interface IProps {}
+function CreateAdminApiKey() {
+ const [createApiKeyResponse, setCreateApiKeyResponse] = useState(undefined);
-interface IState {
- createApiKeyResponse?: CreateApiKeyResponse;
-}
-
-class CreateAdminApiKey extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- onFinish = (obj: ApiKey) => {
+ const onFinish = (obj: ApiKey) => {
obj.setIsAdmin(true);
let req = new CreateApiKeyRequest();
req.setApiKey(obj);
InternalStore.createApiKey(req, (resp: CreateApiKeyResponse) => {
- this.setState({
- createApiKeyResponse: resp,
- });
+ setCreateApiKeyResponse(resp);
});
};
- render() {
- const apiKey = new ApiKey();
+ const apiKey = new ApiKey();
- return (
-
- (
-
-
- Network-server
-
-
-
- API keys
-
-
-
- Add
-
-
- )}
- />
-
- {!this.state.createApiKeyResponse && }
- {this.state.createApiKeyResponse && }
-
-
- );
- }
+ return (
+
+ (
+
+
+ Network-server
+
+
+
+ API keys
+
+
+
+ Add
+
+
+ )}
+ />
+
+ {!createApiKeyResponse && }
+ {createApiKeyResponse && }
+
+
+ );
}
export default CreateAdminApiKey;
diff --git a/ui/src/views/api-keys/CreateTenantApiKey.tsx b/ui/src/views/api-keys/CreateTenantApiKey.tsx
index f250660b..e5feb33e 100644
--- a/ui/src/views/api-keys/CreateTenantApiKey.tsx
+++ b/ui/src/views/api-keys/CreateTenantApiKey.tsx
@@ -1,7 +1,8 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import { Link } from "react-router-dom";
-import { Space, Breadcrumb, Card, PageHeader } from "antd";
+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";
@@ -10,68 +11,57 @@ import ApiKeyForm from "./ApiKeyForm";
import ApiKeyToken from "./ApiKeyToken";
import InternalStore from "../../stores/InternalStore";
-interface IState {
- createApiKeyResponse?: CreateApiKeyResponse;
-}
-
interface IProps {
tenant: Tenant;
}
-class CreateTenantApiKey extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
+function CreateTenantApiKey(props: IProps) {
+ const [createApiKeyResponse, setCreateApiKeyResponse] = useState(undefined);
- onFinish = (obj: ApiKey) => {
- obj.setTenantId(this.props.tenant.getId());
+ const onFinish = (obj: ApiKey) => {
+ obj.setTenantId(props.tenant.getId());
let req = new CreateApiKeyRequest();
req.setApiKey(obj);
InternalStore.createApiKey(req, (resp: CreateApiKeyResponse) => {
- this.setState({
- createApiKeyResponse: resp,
- });
+ setCreateApiKeyResponse(resp);
});
};
- render() {
- const apiKey = new ApiKey();
+ const apiKey = new ApiKey();
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
-
- API Keys
-
-
-
- Add
-
-
- )}
- title="Add API key"
- />
-
- {!this.state.createApiKeyResponse && }
- {this.state.createApiKeyResponse && }
-
-
- );
- }
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+
+ API Keys
+
+
+
+ Add
+
+
+ )}
+ title="Add API key"
+ />
+
+ {!createApiKeyResponse && }
+ {createApiKeyResponse && }
+
+
+ );
}
export default CreateTenantApiKey;
diff --git a/ui/src/views/api-keys/ListAdminApiKeys.tsx b/ui/src/views/api-keys/ListAdminApiKeys.tsx
index 5a7dfb5b..81dce64a 100644
--- a/ui/src/views/api-keys/ListAdminApiKeys.tsx
+++ b/ui/src/views/api-keys/ListAdminApiKeys.tsx
@@ -1,10 +1,10 @@
-import React, { Component } from "react";
-
+import React, { useState } from "react";
import { Link } from "react-router-dom";
import { DeleteOutlined } from "@ant-design/icons";
-import { Space, Breadcrumb, Button, PageHeader } from "antd";
+import { Space, Breadcrumb, Button } from "antd";
import { ColumnsType } from "antd/es/table";
+import { PageHeader } from "@ant-design/pro-layout";
import {
ListApiKeysRequest,
@@ -17,62 +17,47 @@ import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
import InternalStore from "../../stores/InternalStore";
import DeleteConfirm from "../../components/DeleteConfirm";
-interface IProps {}
+function ListAdminApiKeys() {
+ const [refreshKey, setRefreshKey] = useState(1);
-interface IState {
- refreshKey: number;
-}
+ const columns: ColumnsType = [
+ {
+ title: "ID",
+ dataIndex: "id",
+ key: "id",
+ width: 400,
+ },
+ {
+ title: "Name",
+ dataIndex: "name",
+ key: "name",
+ },
+ {
+ title: "Action",
+ dataIndex: "id",
+ key: "action",
+ width: 100,
+ render: (text, record) => (
+
+ } />
+
+ ),
+ },
+ ];
-class ListAdminApiKeys extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- refreshKey: 1,
- };
- }
-
- columns = (): ColumnsType => {
- return [
- {
- title: "ID",
- dataIndex: "id",
- key: "id",
- width: 400,
- },
- {
- title: "Name",
- dataIndex: "name",
- key: "name",
- },
- {
- title: "Action",
- dataIndex: "id",
- key: "action",
- width: 100,
- render: (text, record) => (
-
- } />
-
- ),
- },
- ];
- };
-
- deleteApiKey = (id: string): (() => void) => {
+ const deleteApiKey = (id: string): (() => void) => {
return () => {
let req = new DeleteApiKeyRequest();
req.setId(id);
InternalStore.deleteApiKey(req, () => {
// trigger a data-table reload
- this.setState({
- refreshKey: this.state.refreshKey + 1,
- });
+ setRefreshKey(refreshKey + 1);
});
};
};
- getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
+ const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApiKeysRequest();
req.setLimit(limit);
req.setOffset(offset);
@@ -84,31 +69,29 @@ class ListAdminApiKeys extends Component {
});
};
- render() {
- return (
-
- (
-
-
- Network Server
-
-
- API keys
-
-
- )}
- title="API keys"
- extra={[
- ,
- ]}
- />
-
-
- );
- }
+ return (
+
+ (
+
+
+ Network Server
+
+
+ API keys
+
+
+ )}
+ title="API keys"
+ extra={[
+ ,
+ ]}
+ />
+
+
+ );
}
export default ListAdminApiKeys;
diff --git a/ui/src/views/api-keys/ListTenantApiKeys.tsx b/ui/src/views/api-keys/ListTenantApiKeys.tsx
index 1dd13a8a..e6225078 100644
--- a/ui/src/views/api-keys/ListTenantApiKeys.tsx
+++ b/ui/src/views/api-keys/ListTenantApiKeys.tsx
@@ -1,8 +1,9 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import { Link } from "react-router-dom";
import { DeleteOutlined } from "@ant-design/icons";
-import { Space, Breadcrumb, Button, PageHeader } from "antd";
+import { Space, Breadcrumb, Button } from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
import { ColumnsType } from "antd/es/table";
import {
@@ -20,69 +21,55 @@ import Admin from "../../components/Admin";
interface IProps {
tenant: Tenant;
- isAdmin: boolean;
}
-interface IState {
- refreshKey: number;
-}
+function ListTenantApiKeys(props: IProps) {
+ const [refreshKey, setRefreshKey] = useState(1);
-class ListTenantApiKeys extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- refreshKey: 1,
- };
- }
+ const columns: ColumnsType = [
+ {
+ title: "ID",
+ dataIndex: "id",
+ key: "id",
+ width: 400,
+ },
+ {
+ title: "Name",
+ dataIndex: "name",
+ key: "name",
+ },
+ {
+ title: "Action",
+ dataIndex: "id",
+ key: "action",
+ width: 100,
+ render: (text, record) => (
+
+
+ } />
+
+
+ ),
+ },
+ ];
- columns = (): ColumnsType => {
- return [
- {
- title: "ID",
- dataIndex: "id",
- key: "id",
- width: 400,
- },
- {
- title: "Name",
- dataIndex: "name",
- key: "name",
- },
- {
- title: "Action",
- dataIndex: "id",
- key: "action",
- width: 100,
- render: (text, record) => (
-
-
- } />
-
-
- ),
- },
- ];
- };
-
- deleteApiKey = (id: string): (() => void) => {
+ const deleteApiKey = (id: string): (() => void) => {
return () => {
let req = new DeleteApiKeyRequest();
req.setId(id);
InternalStore.deleteApiKey(req, () => {
// trigger a data-table reload
- this.setState({
- refreshKey: this.state.refreshKey + 1,
- });
+ setRefreshKey(refreshKey + 1);
});
};
};
- getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
+ const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApiKeysRequest();
req.setLimit(limit);
req.setOffset(offset);
- req.setTenantId(this.props.tenant.getId());
+ req.setTenantId(props.tenant.getId());
InternalStore.listApiKeys(req, (resp: ListApiKeysResponse) => {
const obj = resp.toObject();
@@ -90,38 +77,36 @@ class ListTenantApiKeys extends Component {
});
};
- render() {
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
- API Keys
-
-
- )}
- title="API keys"
- extra={[
-
-
- ,
- ]}
- />
-
-
- );
- }
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+ API Keys
+
+
+ )}
+ title="API keys"
+ extra={[
+
+
+ ,
+ ]}
+ />
+
+
+ );
}
export default ListTenantApiKeys;
diff --git a/ui/src/views/applications/ApplicationForm.tsx b/ui/src/views/applications/ApplicationForm.tsx
index b4eab948..fcb637b1 100644
--- a/ui/src/views/applications/ApplicationForm.tsx
+++ b/ui/src/views/applications/ApplicationForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
import { Form, Input, Button } from "antd";
@@ -9,9 +7,9 @@ interface IProps {
disabled?: boolean;
}
-class ApplicationForm extends Component {
- onFinish = (values: Application.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+function ApplicationForm(props: IProps) {
+ const onFinish = (values: Application.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let app = new Application();
app.setId(v.id);
@@ -19,26 +17,24 @@ class ApplicationForm extends Component {
app.setName(v.name);
app.setDescription(v.description);
- this.props.onFinish(app);
+ props.onFinish(app);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default ApplicationForm;
diff --git a/ui/src/views/applications/ApplicationLayout.tsx b/ui/src/views/applications/ApplicationLayout.tsx
index 36e4c935..1dacc518 100644
--- a/ui/src/views/applications/ApplicationLayout.tsx
+++ b/ui/src/views/applications/ApplicationLayout.tsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import { Route, Switch, RouteComponentProps, Link } from "react-router-dom";
+import { Route, Routes, Link, useNavigate, useLocation } from "react-router-dom";
-import { Space, Breadcrumb, Card, Button, PageHeader, Menu } from "antd";
+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";
@@ -38,247 +38,158 @@ import GenerateMqttCertificate from "./integrations/GenerateMqttCertificate";
import CreateIftttIntegration from "./integrations/CreateIftttIntegration";
import EditIftttIntegration from "./integrations/EditIftttIntegration";
-interface IProps extends RouteComponentProps {
+interface IProps {
tenant: Tenant;
application: Application;
measurementKeys: string[];
}
-class ApplicationLayout extends Component {
- deleteApplication = () => {
+function ApplicationLayout(props: IProps) {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const deleteApplication = () => {
let req = new DeleteApplicationRequest();
- req.setId(this.props.application.getId());
+ req.setId(props.application.getId());
ApplicationStore.delete(req, () => {
- this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications`);
+ navigate(`/tenants/${props.tenant.getId()}/applications`);
});
};
- render() {
- const tenant = this.props.tenant;
- const app = this.props.application;
+ const tenant = props.tenant;
+ const app = props.application;
- if (!app) {
- return null;
- }
-
- const path = this.props.history.location.pathname;
- let tab = "devices";
-
- if (path.endsWith("/multicast-groups")) {
- tab = "mg";
- }
- if (path.endsWith("/relays")) {
- tab = "relay";
- }
- if (path.endsWith("/edit")) {
- tab = "edit";
- }
- if (path.match(/.*\/integrations.*/g)) {
- tab = "integrations";
- }
-
- const showIntegrations =
- SessionStore.isAdmin() ||
- SessionStore.isTenantAdmin(tenant.getId()) ||
- SessionStore.isTenantDeviceAdmin(tenant.getId());
-
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
-
- Applications
-
-
-
- {app.getName()}
-
-
- )}
- title={app.getName()}
- subTitle={`application id: ${app.getId()}`}
- extra={[
-
-
-
-
- ,
- ]}
- />
-
-
-
- } />
- }
- />
- }
- />
- }
- />
- }
- />
-
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- (
-
- )}
- />
- (
-
- )}
- />
-
-
-
- );
+ if (!app) {
+ return null;
}
+
+ const path = location.pathname;
+ let tab = "devices";
+
+ if (path.endsWith("/multicast-groups")) {
+ tab = "mg";
+ }
+ if (path.endsWith("/relays")) {
+ tab = "relay";
+ }
+ if (path.endsWith("/edit")) {
+ tab = "edit";
+ }
+ if (path.match(/.*\/integrations.*/g)) {
+ tab = "integrations";
+ }
+
+ const showIntegrations =
+ SessionStore.isAdmin() ||
+ SessionStore.isTenantAdmin(tenant.getId()) ||
+ SessionStore.isTenantDeviceAdmin(tenant.getId());
+
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+
+ Applications
+
+
+
+ {app.getName()}
+
+
+ )}
+ title={app.getName()}
+ subTitle={`application id: ${app.getId()}`}
+ extra={[
+
+
+
+
+ ,
+ ]}
+ />
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ } />
+ } />
+
+ } />
+ } />
+ } />
+ } />
+ }
+ />
+ }
+ />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ }
+ />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ }
+ />
+ }
+ />
+
+
+
+ );
}
export default ApplicationLayout;
diff --git a/ui/src/views/applications/ApplicationLoader.tsx b/ui/src/views/applications/ApplicationLoader.tsx
index c46fd721..ee9b7d99 100644
--- a/ui/src/views/applications/ApplicationLoader.tsx
+++ b/ui/src/views/applications/ApplicationLoader.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { Route, Switch, RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { Route, Routes, useParams } from "react-router-dom";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import {
@@ -16,90 +16,57 @@ import MulticastGroupLayout from "../multicast-groups/MulticastGroupLayout";
import CreateMulticastGroup from "../multicast-groups/CreateMulticastGroup";
import RelayLayout from "../relays/RelayLayout";
-interface MatchParams {
- applicationId: string;
-}
-
-interface IProps extends RouteComponentProps {
+interface IProps {
tenant: Tenant;
}
-interface IState {
- application?: Application;
- measurementKeys: string[];
-}
+function ApplicationLoader(props: IProps) {
+ const { applicationId } = useParams();
+ const [application, setApplication] = useState(undefined);
+ const [measurementKeys, setMeasurementKeys] = useState([]);
-class ApplicationLoader extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- measurementKeys: [],
+ useEffect(() => {
+ ApplicationStore.on("change", loadApplication);
+ loadApplication();
+
+ return () => {
+ ApplicationStore.removeAllListeners("change");
};
- }
+ }, [applicationId]);
- componentDidMount() {
- this.getApplication();
- }
-
- getApplication = () => {
+ const loadApplication = () => {
let req = new GetApplicationRequest();
- req.setId(this.props.match.params.applicationId);
+ req.setId(applicationId!);
ApplicationStore.get(req, (resp: GetApplicationResponse) => {
- this.setState({
- application: resp.getApplication(),
- measurementKeys: resp.getMeasurementKeysList(),
- });
+ setApplication(resp.getApplication());
+ setMeasurementKeys(resp.getMeasurementKeysList());
});
};
- render() {
- const app = this.state.application;
- if (!app) {
- return null;
- }
-
- const path = this.props.match.path;
- const tenant = this.props.tenant;
-
- return (
-
- }
- />
- }
- />
- }
- />
- }
- />
- }
- />
- (
-
- )}
- />
-
- );
+ const app = application;
+ if (!app) {
+ return null;
}
+
+ const tenant = props.tenant;
+
+ return (
+
+ } />
+ } />
+ }
+ />
+ } />
+ } />
+ }
+ />
+
+ );
}
export default ApplicationLoader;
diff --git a/ui/src/views/applications/CreateApplication.tsx b/ui/src/views/applications/CreateApplication.tsx
index e9dd0abc..205bac0d 100644
--- a/ui/src/views/applications/CreateApplication.tsx
+++ b/ui/src/views/applications/CreateApplication.tsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import { Link, RouteComponentProps } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
-import { Space, Breadcrumb, Card, PageHeader } from "antd";
+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 {
@@ -13,56 +13,56 @@ import {
import ApplicationForm from "./ApplicationForm";
import ApplicationStore from "../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
tenant: Tenant;
}
-class CreateApplication extends Component {
- onFinish = (obj: Application) => {
- obj.setTenantId(this.props.tenant.getId());
+function CreateApplication(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: Application) => {
+ obj.setTenantId(props.tenant.getId());
let req = new CreateApplicationRequest();
req.setApplication(obj);
ApplicationStore.create(req, (resp: CreateApplicationResponse) => {
- this.props.history.push(`/tenants/${this.props.tenant.getId()}/applications/${resp.getId()}`);
+ navigate(`/tenants/${props.tenant.getId()}/applications/${resp.getId()}`);
});
};
- render() {
- const app = new Application();
+ const app = new Application();
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
-
- Applications
-
-
-
- Add
-
-
- )}
- title="Add application"
- />
-
-
-
-
- );
- }
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+
+ Applications
+
+
+
+ Add
+
+
+ )}
+ title="Add application"
+ />
+
+
+
+
+ );
}
export default CreateApplication;
diff --git a/ui/src/views/applications/EditApplication.tsx b/ui/src/views/applications/EditApplication.tsx
index 1f3dbf66..7fd50129 100644
--- a/ui/src/views/applications/EditApplication.tsx
+++ b/ui/src/views/applications/EditApplication.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Application, UpdateApplicationRequest } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@@ -7,31 +6,29 @@ import ApplicationStore from "../../stores/ApplicationStore";
import ApplicationForm from "./ApplicationForm";
import SessionStore from "../../stores/SessionStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class EditApplication extends Component {
- onFinish = (obj: Application) => {
+function EditApplication(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: Application) => {
let req = new UpdateApplicationRequest();
req.setApplication(obj);
ApplicationStore.update(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}`);
});
};
- render() {
- const disabled = !(
- SessionStore.isAdmin() ||
- SessionStore.isTenantAdmin(this.props.application.getTenantId()) ||
- SessionStore.isTenantDeviceAdmin(this.props.application.getTenantId())
- );
+ const disabled = !(
+ SessionStore.isAdmin() ||
+ SessionStore.isTenantAdmin(props.application.getTenantId()) ||
+ SessionStore.isTenantDeviceAdmin(props.application.getTenantId())
+ );
- return ;
- }
+ return ;
}
export default EditApplication;
diff --git a/ui/src/views/applications/ListApplications.tsx b/ui/src/views/applications/ListApplications.tsx
index ca422b63..76d53a40 100644
--- a/ui/src/views/applications/ListApplications.tsx
+++ b/ui/src/views/applications/ListApplications.tsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
-import { Space, Breadcrumb, Button, PageHeader } from "antd";
+import { Space, Breadcrumb, Button } from "antd";
import { ColumnsType } from "antd/es/table";
+import { PageHeader } from "@ant-design/pro-layout";
import {
ListApplicationsRequest,
@@ -19,29 +19,25 @@ interface IProps {
tenant: Tenant;
}
-class ListApplications extends Component {
- columns = (): ColumnsType => {
- return [
- {
- title: "Name",
- dataIndex: "name",
- key: "name",
- width: 250,
- render: (text, record) => (
- {text}
- ),
- },
- {
- title: "Description",
- dataIndex: "description",
- key: "description",
- },
- ];
- };
+function ListApplications(props: IProps) {
+ const columns: ColumnsType = [
+ {
+ title: "Name",
+ dataIndex: "name",
+ key: "name",
+ width: 250,
+ render: (text, record) => {text},
+ },
+ {
+ title: "Description",
+ dataIndex: "description",
+ key: "description",
+ },
+ ];
- getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
+ const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListApplicationsRequest();
- req.setTenantId(this.props.tenant.getId());
+ req.setTenantId(props.tenant.getId());
req.setLimit(limit);
req.setOffset(offset);
@@ -51,38 +47,36 @@ class ListApplications extends Component {
});
};
- render() {
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
- Applications
-
-
- )}
- title="Applications"
- extra={[
-
-
- ,
- ]}
- />
-
-
- );
- }
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+ Applications
+
+
+ )}
+ title="Applications"
+ extra={[
+
+
+ ,
+ ]}
+ />
+
+
+ );
}
export default ListApplications;
diff --git a/ui/src/views/applications/ListIntegrations.tsx b/ui/src/views/applications/ListIntegrations.tsx
index 3da4834b..51fcfad0 100644
--- a/ui/src/views/applications/ListIntegrations.tsx
+++ b/ui/src/views/applications/ListIntegrations.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Row } from "antd";
@@ -27,32 +27,22 @@ interface IProps {
application: Application;
}
-interface IState {
- configured: any[];
- available: any[];
-}
+function ListIntegrations(props: IProps) {
+ const [configured, setConfigured] = useState([]);
+ const [available, setAvailable] = useState([]);
-class ListIntegrations extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- configured: [],
- available: [],
+ useEffect(() => {
+ ApplicationStore.on("integration.delete", loadIntegrations);
+ loadIntegrations();
+
+ return () => {
+ ApplicationStore.removeAllListeners("integration.delete");
};
- }
+ }, []);
- componentDidMount() {
- ApplicationStore.on("integration.delete", this.loadIntegrations);
- this.loadIntegrations();
- }
-
- componentWillUnmount() {
- ApplicationStore.removeAllListeners("integration.delete");
- }
-
- loadIntegrations = () => {
+ const loadIntegrations = () => {
let req = new ListIntegrationsRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.listIntegrations(req, (resp: ListIntegrationsResponse) => {
let configured: any[] = [];
@@ -70,94 +60,90 @@ class ListIntegrations extends Component {
// AWS SNS
if (includes(resp.getResultList(), IntegrationKind.AWS_SNS)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// Azure Service-Bus
if (includes(resp.getResultList(), IntegrationKind.AZURE_SERVICE_BUS)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// GCP Pub/Sub
if (includes(resp.getResultList(), IntegrationKind.GCP_PUB_SUB)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// HTTP
if (includes(resp.getResultList(), IntegrationKind.HTTP)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// IFTTT
if (includes(resp.getResultList(), IntegrationKind.IFTTT)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// InfluxDB
if (includes(resp.getResultList(), IntegrationKind.INFLUX_DB)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// MQTT
if (includes(resp.getResultList(), IntegrationKind.MQTT_GLOBAL)) {
- configured.push();
+ configured.push();
}
// myDevices
if (includes(resp.getResultList(), IntegrationKind.MY_DEVICES)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// Pilot Things
if (includes(resp.getResultList(), IntegrationKind.PILOT_THINGS)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// Semtech LoRa Cloud
if (includes(resp.getResultList(), IntegrationKind.LORA_CLOUD)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
// ThingsBoard
if (includes(resp.getResultList(), IntegrationKind.THINGS_BOARD)) {
- configured.push();
+ configured.push();
} else {
- available.push();
+ available.push();
}
- this.setState({
- configured: configured,
- available: available,
- });
+ setConfigured(configured);
+ setAvailable(available);
});
};
- render() {
- return (
-
- {this.state.configured}
- {this.state.available}
-
- );
- }
+ return (
+
+ {configured}
+ {available}
+
+ );
}
export default ListIntegrations;
diff --git a/ui/src/views/applications/integrations/AwsSnsCard.tsx b/ui/src/views/applications/integrations/AwsSnsCard.tsx
index 84e68c1a..de9e9feb 100644
--- a/ui/src/views/applications/integrations/AwsSnsCard.tsx
+++ b/ui/src/views/applications/integrations/AwsSnsCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -13,47 +12,45 @@ interface IProps {
add?: boolean;
}
-class AwsSns extends Component {
- onDelete = () => {
+function AwsSns(props: IProps) {
+ const onDelete = () => {
let req = new DeleteAwsSnsIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteAwsSnsIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default AwsSns;
diff --git a/ui/src/views/applications/integrations/AwsSnsIntegrationForm.tsx b/ui/src/views/applications/integrations/AwsSnsIntegrationForm.tsx
index 9e049344..77922264 100644
--- a/ui/src/views/applications/integrations/AwsSnsIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/AwsSnsIntegrationForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Form, Input, Button, Select } from "antd";
import { AwsSnsIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@@ -9,9 +7,9 @@ interface IProps {
onFinish: (obj: AwsSnsIntegration) => void;
}
-class AwsSnsIntegrationForm extends Component {
- onFinish = (values: AwsSnsIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+function AwsSnsIntegrationForm(props: IProps) {
+ const onFinish = (values: AwsSnsIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new AwsSnsIntegration();
i.setApplicationId(v.applicationId);
@@ -21,54 +19,52 @@ class AwsSnsIntegrationForm extends Component {
i.setSecretAccessKey(v.secretAccessKey);
i.setTopicArn(v.topicArn);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default AwsSnsIntegrationForm;
diff --git a/ui/src/views/applications/integrations/AzureServiceBusCard.tsx b/ui/src/views/applications/integrations/AzureServiceBusCard.tsx
index be4d30f7..bd5ffa31 100644
--- a/ui/src/views/applications/integrations/AzureServiceBusCard.tsx
+++ b/ui/src/views/applications/integrations/AzureServiceBusCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -16,46 +15,44 @@ interface IProps {
add?: boolean;
}
-class AzureServiceBusCard extends Component {
- onDelete = () => {
+function AzureServiceBusCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteAzureServiceBusIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteAzureServiceBusIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default AzureServiceBusCard;
diff --git a/ui/src/views/applications/integrations/AzureServiceBusIntegrationForm.tsx b/ui/src/views/applications/integrations/AzureServiceBusIntegrationForm.tsx
index aa0ccc99..7089f270 100644
--- a/ui/src/views/applications/integrations/AzureServiceBusIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/AzureServiceBusIntegrationForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Form, Input, Button, Select } from "antd";
import { AzureServiceBusIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@@ -9,9 +7,9 @@ interface IProps {
onFinish: (obj: AzureServiceBusIntegration) => void;
}
-class AzureServiceBusIntegrationForm extends Component {
- onFinish = (values: AzureServiceBusIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+function AzureServiceBusIntegrationForm(props: IProps) {
+ const onFinish = (values: AzureServiceBusIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new AzureServiceBusIntegration();
i.setApplicationId(v.applicationId);
@@ -19,45 +17,53 @@ class AzureServiceBusIntegrationForm extends Component {
i.setConnectionString(v.connectionString);
i.setPublishName(v.publishName);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default AzureServiceBusIntegrationForm;
diff --git a/ui/src/views/applications/integrations/CreateAwsSnsIntegration.tsx b/ui/src/views/applications/integrations/CreateAwsSnsIntegration.tsx
index f96ff64e..0e6dffdb 100644
--- a/ui/src/views/applications/integrations/CreateAwsSnsIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateAwsSnsIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import AwsSnsIntegrationForm from "./AwsSnsIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateAwsSnsIntegration extends Component {
- onFinish = (obj: AwsSnsIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateAwsSnsIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: AwsSnsIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateAwsSnsIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createAwsSnsIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new AwsSnsIntegration();
+ const i = new AwsSnsIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateAwsSnsIntegration;
diff --git a/ui/src/views/applications/integrations/CreateAzureServiceBusIntegration.tsx b/ui/src/views/applications/integrations/CreateAzureServiceBusIntegration.tsx
index 4e7e38af..9d00d4c6 100644
--- a/ui/src/views/applications/integrations/CreateAzureServiceBusIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateAzureServiceBusIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import AzureServiceBusIntegrationForm from "./AzureServiceBusIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateAzureServiceBusIntegration extends Component {
- onFinish = (obj: AzureServiceBusIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateAzureServiceBusIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: AzureServiceBusIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateAzureServiceBusIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createAzureServiceBusIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new AzureServiceBusIntegration();
+ const i = new AzureServiceBusIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateAzureServiceBusIntegration;
diff --git a/ui/src/views/applications/integrations/CreateGcpPubSubIntegration.tsx b/ui/src/views/applications/integrations/CreateGcpPubSubIntegration.tsx
index 8c513065..d42edf72 100644
--- a/ui/src/views/applications/integrations/CreateGcpPubSubIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateGcpPubSubIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import GcpPubSubIntegrationForm from "./GcpPubSubIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateGcpPubSubIntegration extends Component {
- onFinish = (obj: GcpPubSubIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateGcpPubSubIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: GcpPubSubIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateGcpPubSubIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createGcpPubSubIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new GcpPubSubIntegration();
+ const i = new GcpPubSubIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateGcpPubSubIntegration;
diff --git a/ui/src/views/applications/integrations/CreateHttpIntegration.tsx b/ui/src/views/applications/integrations/CreateHttpIntegration.tsx
index ffabf643..15150e24 100644
--- a/ui/src/views/applications/integrations/CreateHttpIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateHttpIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import HttpIntegrationForm from "./HttpIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateHttpIntegration extends Component {
- onFinish = (obj: HttpIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateHttpIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: HttpIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateHttpIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createHttpIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new HttpIntegration();
+ const i = new HttpIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateHttpIntegration;
diff --git a/ui/src/views/applications/integrations/CreateIftttIntegration.tsx b/ui/src/views/applications/integrations/CreateIftttIntegration.tsx
index 1fb8e226..20959ddc 100644
--- a/ui/src/views/applications/integrations/CreateIftttIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateIftttIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,35 +11,33 @@ import {
import IftttIntegrationForm from "./IftttIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
measurementKeys: string[];
}
-class CreateIftttIntegration extends Component {
- onFinish = (obj: IftttIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateIftttIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: IftttIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateIftttIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createIftttIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new IftttIntegration();
- i.setUplinkValuesList(["", ""]);
+ const i = new IftttIntegration();
+ i.setUplinkValuesList(["", ""]);
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateIftttIntegration;
diff --git a/ui/src/views/applications/integrations/CreateInfluxDbIntegration.tsx b/ui/src/views/applications/integrations/CreateInfluxDbIntegration.tsx
index 3470c663..3ec2f393 100644
--- a/ui/src/views/applications/integrations/CreateInfluxDbIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateInfluxDbIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import InfluxDbIntegrationForm from "./InfluxDbIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateInfluxDbIntegration extends Component {
- onFinish = (obj: InfluxDbIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateInfluxDbIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: InfluxDbIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateInfluxDbIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createInfluxDbIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new InfluxDbIntegration();
+ const i = new InfluxDbIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateInfluxDbIntegration;
diff --git a/ui/src/views/applications/integrations/CreateLoRaCloudIntegration.tsx b/ui/src/views/applications/integrations/CreateLoRaCloudIntegration.tsx
index 26dc77e2..b8520ba9 100644
--- a/ui/src/views/applications/integrations/CreateLoRaCloudIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateLoRaCloudIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -13,38 +12,36 @@ import {
import LoRaCloudIntegrationForm from "./LoRaCloudIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateLoRaCloudIntegration extends Component {
- onFinish = (obj: LoraCloudIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateLoRaCloudIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: LoraCloudIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateLoraCloudIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createLoraCloudIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- let i = new LoraCloudIntegration();
- let mgs = new LoraCloudModemGeolocationServices();
- mgs.setModemEnabled(true);
- mgs.setForwardFPortsList([192, 197, 198, 199]);
+ let i = new LoraCloudIntegration();
+ let mgs = new LoraCloudModemGeolocationServices();
+ mgs.setModemEnabled(true);
+ mgs.setForwardFPortsList([192, 197, 198, 199]);
- i.setModemGeolocationServices(mgs);
+ i.setModemGeolocationServices(mgs);
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateLoRaCloudIntegration;
diff --git a/ui/src/views/applications/integrations/CreateMyDevicesIntegration.tsx b/ui/src/views/applications/integrations/CreateMyDevicesIntegration.tsx
index e91ae81b..3a3a4d72 100644
--- a/ui/src/views/applications/integrations/CreateMyDevicesIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateMyDevicesIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import MyDevicesIntegrationForm from "./MyDevicesIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateMyDevicesIntegration extends Component {
- onFinish = (obj: MyDevicesIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateMyDevicesIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: MyDevicesIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateMyDevicesIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createMyDevicesIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new MyDevicesIntegration();
+ const i = new MyDevicesIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateMyDevicesIntegration;
diff --git a/ui/src/views/applications/integrations/CreatePilotThingsIntegration.tsx b/ui/src/views/applications/integrations/CreatePilotThingsIntegration.tsx
index 989d5e0c..b2c030d6 100644
--- a/ui/src/views/applications/integrations/CreatePilotThingsIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreatePilotThingsIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import PilotThingsIntegrationForm from "./PilotThingsIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreatePilotThingsIntegration extends Component {
- onFinish = (obj: PilotThingsIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreatePilotThingsIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: PilotThingsIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreatePilotThingsIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createPilotThingsIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new PilotThingsIntegration();
+ const i = new PilotThingsIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreatePilotThingsIntegration;
diff --git a/ui/src/views/applications/integrations/CreateThingsBoardIntegration.tsx b/ui/src/views/applications/integrations/CreateThingsBoardIntegration.tsx
index a4fcabe9..79ad2003 100644
--- a/ui/src/views/applications/integrations/CreateThingsBoardIntegration.tsx
+++ b/ui/src/views/applications/integrations/CreateThingsBoardIntegration.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -12,33 +11,31 @@ import {
import ThingsBoardIntegrationForm from "./ThingsBoardIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-class CreateThingsBoardIntegration extends Component {
- onFinish = (obj: ThingsBoardIntegration) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateThingsBoardIntegration(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: ThingsBoardIntegration) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateThingsBoardIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.createThingsBoardIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- const i = new ThingsBoardIntegration();
+ const i = new ThingsBoardIntegration();
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
export default CreateThingsBoardIntegration;
diff --git a/ui/src/views/applications/integrations/EditAwsSnsIntegration.tsx b/ui/src/views/applications/integrations/EditAwsSnsIntegration.tsx
index d616cfc6..4e64223e 100644
--- a/ui/src/views/applications/integrations/EditAwsSnsIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditAwsSnsIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import AwsSnsIntegrationForm from "./AwsSnsIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: AwsSnsIntegration;
-}
+function EditAwsSnsIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditAwsSnsIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetAwsSnsIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getAwsSnsIntegration(req, (resp: GetAwsSnsIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: AwsSnsIntegration) => {
+ const onFinish = (obj: AwsSnsIntegration) => {
let req = new UpdateAwsSnsIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateAwsSnsIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditAwsSnsIntegration;
diff --git a/ui/src/views/applications/integrations/EditAzureServiceBusIntegration.tsx b/ui/src/views/applications/integrations/EditAzureServiceBusIntegration.tsx
index 4b40cf24..cd0290ad 100644
--- a/ui/src/views/applications/integrations/EditAzureServiceBusIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditAzureServiceBusIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import AzureServiceBusIntegrationForm from "./AzureServiceBusIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: AzureServiceBusIntegration;
-}
+function EditAzureServiceBusIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditAzureServiceBusIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetAzureServiceBusIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getAzureServiceBusIntegration(req, (resp: GetAzureServiceBusIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: AzureServiceBusIntegration) => {
+ const onFinish = (obj: AzureServiceBusIntegration) => {
let req = new UpdateAzureServiceBusIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateAzureServiceBusIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditAzureServiceBusIntegration;
diff --git a/ui/src/views/applications/integrations/EditGcpPubSubIntegration.tsx b/ui/src/views/applications/integrations/EditGcpPubSubIntegration.tsx
index 4f316866..74e12ae1 100644
--- a/ui/src/views/applications/integrations/EditGcpPubSubIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditGcpPubSubIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import GcpPubSubIntegrationForm from "./GcpPubSubIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: GcpPubSubIntegration;
-}
+function EditGcpPubSubIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditGcpPubSubIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetGcpPubSubIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getGcpPubSubIntegration(req, (resp: GetGcpPubSubIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: GcpPubSubIntegration) => {
+ const onFinish = (obj: GcpPubSubIntegration) => {
let req = new UpdateGcpPubSubIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateGcpPubSubIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditGcpPubSubIntegration;
diff --git a/ui/src/views/applications/integrations/EditHttpIntegration.tsx b/ui/src/views/applications/integrations/EditHttpIntegration.tsx
index 2ff58391..b0b42de9 100644
--- a/ui/src/views/applications/integrations/EditHttpIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditHttpIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import HttpIntegrationForm from "./HttpIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: HttpIntegration;
-}
+function EditHttpIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditHttpIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetHttpIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getHttpIntegration(req, (resp: GetHttpIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: HttpIntegration) => {
+ const onFinish = (obj: HttpIntegration) => {
let req = new UpdateHttpIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateHttpIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditHttpIntegration;
diff --git a/ui/src/views/applications/integrations/EditIftttIntegration.tsx b/ui/src/views/applications/integrations/EditIftttIntegration.tsx
index ab6b6af0..5e9c97e6 100644
--- a/ui/src/views/applications/integrations/EditIftttIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditIftttIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,58 +14,42 @@ import {
import IftttIntegrationForm from "./IftttIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
measurementKeys: string[];
}
-interface IState {
- integration?: IftttIntegration;
-}
+function EditIftttIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditIftttIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetIftttIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getIftttIntegration(req, (resp: GetIftttIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: IftttIntegration) => {
+ const onFinish = (obj: IftttIntegration) => {
let req = new UpdateIftttIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateIftttIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditIftttIntegration;
diff --git a/ui/src/views/applications/integrations/EditInfluxDbIntegration.tsx b/ui/src/views/applications/integrations/EditInfluxDbIntegration.tsx
index 004ae9c5..9e665fd1 100644
--- a/ui/src/views/applications/integrations/EditInfluxDbIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditInfluxDbIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import InfluxDbIntegrationForm from "./InfluxDbIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: InfluxDbIntegration;
-}
+function EditInfluxDbIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditInfluxDbIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetInfluxDbIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getInfluxDbIntegration(req, (resp: GetInfluxDbIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: InfluxDbIntegration) => {
+ const onFinish = (obj: InfluxDbIntegration) => {
let req = new UpdateInfluxDbIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateInfluxDbIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditInfluxDbIntegration;
diff --git a/ui/src/views/applications/integrations/EditLoRaCloudIntegration.tsx b/ui/src/views/applications/integrations/EditLoRaCloudIntegration.tsx
index 56b8c174..cb454c5f 100644
--- a/ui/src/views/applications/integrations/EditLoRaCloudIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditLoRaCloudIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import LoRaCloudIntegrationForm from "./LoRaCloudIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: LoraCloudIntegration;
-}
+function EditLoRaCloudIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditLoRaCloudIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetLoraCloudIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getLoraCloudIntegration(req, (resp: GetLoraCloudIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: LoraCloudIntegration) => {
+ const onFinish = (obj: LoraCloudIntegration) => {
let req = new UpdateLoraCloudIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateLoraCloudIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditLoRaCloudIntegration;
diff --git a/ui/src/views/applications/integrations/EditMyDevicesIntegration.tsx b/ui/src/views/applications/integrations/EditMyDevicesIntegration.tsx
index e78b77b1..35ad7722 100644
--- a/ui/src/views/applications/integrations/EditMyDevicesIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditMyDevicesIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import MyDevicesIntegrationForm from "./MyDevicesIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: MyDevicesIntegration;
-}
+function EditMyDevicesIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditMyDevicesIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetMyDevicesIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getMyDevicesIntegration(req, (resp: GetMyDevicesIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: MyDevicesIntegration) => {
+ const onFinish = (obj: MyDevicesIntegration) => {
let req = new UpdateMyDevicesIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateMyDevicesIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditMyDevicesIntegration;
diff --git a/ui/src/views/applications/integrations/EditPilotThingsIntegration.tsx b/ui/src/views/applications/integrations/EditPilotThingsIntegration.tsx
index 40dd6da3..0e7005a3 100644
--- a/ui/src/views/applications/integrations/EditPilotThingsIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditPilotThingsIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import PilotThingsIntegrationForm from "./PilotThingsIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: PilotThingsIntegration;
-}
+function EditPilotThingsIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditPilotThingsIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetPilotThingsIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getPilotThingsIntegration(req, (resp: GetPilotThingsIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: PilotThingsIntegration) => {
+ const onFinish = (obj: PilotThingsIntegration) => {
let req = new UpdatePilotThingsIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updatePilotThingsIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditPilotThingsIntegration;
diff --git a/ui/src/views/applications/integrations/EditThingsBoardIntegration.tsx b/ui/src/views/applications/integrations/EditThingsBoardIntegration.tsx
index 71b46359..ff689f89 100644
--- a/ui/src/views/applications/integrations/EditThingsBoardIntegration.tsx
+++ b/ui/src/views/applications/integrations/EditThingsBoardIntegration.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Card } from "antd";
@@ -14,53 +14,41 @@ import {
import ThingsBoardIntegrationForm from "./ThingsBoardIntegrationForm";
import ApplicationStore from "../../../stores/ApplicationStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
application: Application;
}
-interface IState {
- integration?: ThingsBoardIntegration;
-}
+function EditThingsBoardIntegration(props: IProps) {
+ const navigate = useNavigate();
+ const [integration, setIntegration] = useState(undefined);
-class EditThingsBoardIntegration extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetThingsBoardIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.getThingsBoardIntegration(req, (resp: GetThingsBoardIntegrationResponse) => {
- this.setState({
- integration: resp.getIntegration(),
- });
+ setIntegration(resp.getIntegration());
});
- }
+ }, [props]);
- onFinish = (obj: ThingsBoardIntegration) => {
+ const onFinish = (obj: ThingsBoardIntegration) => {
let req = new UpdateThingsBoardIntegrationRequest();
req.setIntegration(obj);
ApplicationStore.updateThingsBoardIntegration(req, () => {
- this.props.history.push(
- `/tenants/${this.props.application.getTenantId()}/applications/${this.props.application.getId()}/integrations`,
- );
+ navigate(`/tenants/${props.application.getTenantId()}/applications/${props.application.getId()}/integrations`);
});
};
- render() {
- if (this.state.integration === undefined) {
- return null;
- }
-
- return (
-
-
-
- );
+ if (integration === undefined) {
+ return null;
}
+
+ return (
+
+
+
+ );
}
export default EditThingsBoardIntegration;
diff --git a/ui/src/views/applications/integrations/GcpPubSubCard.tsx b/ui/src/views/applications/integrations/GcpPubSubCard.tsx
index dfb65030..ff021ae8 100644
--- a/ui/src/views/applications/integrations/GcpPubSubCard.tsx
+++ b/ui/src/views/applications/integrations/GcpPubSubCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -13,46 +12,44 @@ interface IProps {
add?: boolean;
}
-class GcpPubSubCard extends Component {
- onDelete = () => {
+function GcpPubSubCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteGcpPubSubIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteGcpPubSubIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default GcpPubSubCard;
diff --git a/ui/src/views/applications/integrations/GcpPubSubIntegrationForm.tsx b/ui/src/views/applications/integrations/GcpPubSubIntegrationForm.tsx
index 7e8ffcaf..0ae282f5 100644
--- a/ui/src/views/applications/integrations/GcpPubSubIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/GcpPubSubIntegrationForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Form, Input, Button, Select } from "antd";
import { GcpPubSubIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@@ -9,9 +7,9 @@ interface IProps {
onFinish: (obj: GcpPubSubIntegration) => void;
}
-class GcpPubSubIntegrationForm extends Component {
- onFinish = (values: GcpPubSubIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+function GcpPubSubIntegrationForm(props: IProps) {
+ const onFinish = (values: GcpPubSubIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new GcpPubSubIntegration();
i.setApplicationId(v.applicationId);
@@ -20,52 +18,55 @@ class GcpPubSubIntegrationForm extends Component {
i.setTopicName(v.topicName);
i.setCredentialsFile(v.credentialsFile);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default GcpPubSubIntegrationForm;
diff --git a/ui/src/views/applications/integrations/GenerateMqttCertificate.tsx b/ui/src/views/applications/integrations/GenerateMqttCertificate.tsx
index 13a32693..125d9fc0 100644
--- a/ui/src/views/applications/integrations/GenerateMqttCertificate.tsx
+++ b/ui/src/views/applications/integrations/GenerateMqttCertificate.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import moment from "moment";
import { Card, Button, Form, Input } from "antd";
@@ -15,39 +15,27 @@ interface IProps {
application: Application;
}
-interface IState {
- certificate?: GenerateMqttIntegrationClientCertificateResponse;
- buttonDisabled: boolean;
-}
+function GenerateMqttCertificate(props: IProps) {
+ const [certificate, setCertificate] = useState(
+ undefined,
+ );
+ const [buttonDisabled, setButtonDisabled] = useState(false);
-class GenerateMqttCertificate extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- certificate: undefined,
- buttonDisabled: false,
- };
- }
-
- requestCertificate = () => {
- this.setState({
- buttonDisabled: true,
- });
+ const requestCertificate = () => {
+ setButtonDisabled(true);
let req = new GenerateMqttIntegrationClientCertificateRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.generateMqttIntegrationClientCertificate(
req,
(resp: GenerateMqttIntegrationClientCertificateResponse) => {
- this.setState({
- certificate: resp,
- });
+ setCertificate(resp);
},
);
};
- renderRequest = () => {
+ const renderRequest = () => {
return (
@@ -59,7 +47,7 @@ class GenerateMqttCertificate extends Component {
-
@@ -67,14 +55,14 @@ class GenerateMqttCertificate extends Component {
);
};
- renderResponse = () => {
- const certificate = this.state.certificate!;
+ const renderResponse = () => {
+ const cert = certificate!;
const initial = {
- expiresAt: moment(certificate.getExpiresAt()!.toDate()!).format("YYYY-MM-DD HH:mm:ss"),
- caCert: certificate.getCaCert(),
- tlsCert: certificate.getTlsCert(),
- tlsKey: certificate.getTlsKey(),
+ expiresAt: moment(cert.getExpiresAt()!.toDate()!).format("YYYY-MM-DD HH:mm:ss"),
+ caCert: cert.getCaCert(),
+ tlsCert: cert.getTlsCert(),
+ tlsKey: cert.getTlsKey(),
};
return (
@@ -103,15 +91,13 @@ class GenerateMqttCertificate extends Component {
);
};
- render() {
- let content = this.renderRequest();
+ let content = renderRequest();
- if (this.state.certificate !== undefined) {
- content = this.renderResponse();
- }
-
- return {content};
+ if (certificate !== undefined) {
+ content = renderResponse();
}
+
+ return {content};
}
export default GenerateMqttCertificate;
diff --git a/ui/src/views/applications/integrations/HttpCard.tsx b/ui/src/views/applications/integrations/HttpCard.tsx
index e78ee6b2..b045e300 100644
--- a/ui/src/views/applications/integrations/HttpCard.tsx
+++ b/ui/src/views/applications/integrations/HttpCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -13,46 +12,44 @@ interface IProps {
add?: boolean;
}
-class HttpCard extends Component {
- onDelete = () => {
+function HttpCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteHttpIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteHttpIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default HttpCard;
diff --git a/ui/src/views/applications/integrations/HttpIntegrationForm.tsx b/ui/src/views/applications/integrations/HttpIntegrationForm.tsx
index 5407da29..72613820 100644
--- a/ui/src/views/applications/integrations/HttpIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/HttpIntegrationForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Form, Input, Button, Select, Row, Col, Typography, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@@ -10,9 +8,9 @@ interface IProps {
onFinish: (obj: HttpIntegration) => void;
}
-class HttpIntegrationForm extends Component {
- onFinish = (values: HttpIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+function HttpIntegrationForm(props: IProps) {
+ const onFinish = (values: HttpIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new HttpIntegration();
i.setApplicationId(v.applicationId);
@@ -24,79 +22,77 @@ class HttpIntegrationForm extends Component {
i.getHeadersMap().set(elm[0], elm[1]);
}
- this.props.onFinish(i);
+ props.onFinish(i);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default HttpIntegrationForm;
diff --git a/ui/src/views/applications/integrations/IftttCard.tsx b/ui/src/views/applications/integrations/IftttCard.tsx
index fc6ac4db..8b2e656d 100644
--- a/ui/src/views/applications/integrations/IftttCard.tsx
+++ b/ui/src/views/applications/integrations/IftttCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -13,46 +12,44 @@ interface IProps {
add?: boolean;
}
-class IftttCard extends Component {
- onDelete = () => {
+function IftttCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteIftttIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteIftttIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default IftttCard;
diff --git a/ui/src/views/applications/integrations/IftttIntegrationForm.tsx b/ui/src/views/applications/integrations/IftttIntegrationForm.tsx
index a238ceff..15525e9b 100644
--- a/ui/src/views/applications/integrations/IftttIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/IftttIntegrationForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Form, Input, AutoComplete, Button, Row, Col, Switch } from "antd";
@@ -10,29 +10,15 @@ interface IProps {
onFinish: (obj: IftttIntegration) => void;
}
-interface IState {
- arbitraryJson: boolean;
-}
+function IftttIntegrationForm(props: IProps) {
+ const [arbitraryJson, setArbitraryJson] = useState(false);
-class IftttIntegrationForm extends Component {
- constructor(props: IProps) {
- super(props);
+ useEffect(() => {
+ setArbitraryJson(props.initialValues.getArbitraryJson());
+ }, [props]);
- this.state = {
- arbitraryJson: false,
- };
- }
-
- componentDidMount() {
- const v = this.props.initialValues;
-
- this.setState({
- arbitraryJson: v.getArbitraryJson(),
- });
- }
-
- onFinish = (values: IftttIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: IftttIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new IftttIntegration();
i.setApplicationId(v.applicationId);
@@ -41,55 +27,58 @@ class IftttIntegrationForm extends Component {
i.setArbitraryJson(v.arbitraryJson);
i.setUplinkValuesList(v.uplinkValuesList);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- onArbitraryJsonChange = (checked: boolean) => {
- this.setState({
- arbitraryJson: checked,
- });
- }
+ const onArbitraryJsonChange = (checked: boolean) => {
+ setArbitraryJson(checked);
+ };
- render() {
- const options: {
- value: string;
- }[] = this.props.measurementKeys.map(v => {
- return { value: v };
- });
+ const options: {
+ value: string;
+ }[] = props.measurementKeys.map(v => {
+ return { value: v };
+ });
- return (
-
+ );
}
export default IftttIntegrationForm;
diff --git a/ui/src/views/applications/integrations/InfluxDbIntegrationForm.tsx b/ui/src/views/applications/integrations/InfluxDbIntegrationForm.tsx
index 91eef013..5fd79eef 100644
--- a/ui/src/views/applications/integrations/InfluxDbIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/InfluxDbIntegrationForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import { Form, Input, Button, Select } from "antd";
@@ -13,20 +13,11 @@ interface IProps {
onFinish: (obj: InfluxDbIntegration) => void;
}
-interface IState {
- selectedVersion: InfluxDbVersion;
-}
+function InfluxDbIntegrationForm(props: IProps) {
+ const [selectedVersion, setSelectedVersion] = useState(InfluxDbVersion.INFLUXDB_1);
-class InfluxDbIntegrationForm extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- selectedVersion: InfluxDbVersion.INFLUXDB_1,
- };
- }
-
- onFinish = (values: InfluxDbIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: InfluxDbIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new InfluxDbIntegration();
i.setApplicationId(v.applicationId);
@@ -41,98 +32,90 @@ class InfluxDbIntegrationForm extends Component {
i.setBucket(v.bucket);
i.setToken(v.token);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- onVersionChange = (version: InfluxDbVersion) => {
- this.setState({
- selectedVersion: version,
- });
+ const onVersionChange = (version: InfluxDbVersion) => {
+ setSelectedVersion(version);
};
- render() {
- return (
-
- );
- }
+ )}
+ {selectedVersion === InfluxDbVersion.INFLUXDB_2 && (
+
+
+
+ )}
+
+
+
+
+ );
}
export default InfluxDbIntegrationForm;
diff --git a/ui/src/views/applications/integrations/InfluxdbCard.tsx b/ui/src/views/applications/integrations/InfluxdbCard.tsx
index 088605f9..438934aa 100644
--- a/ui/src/views/applications/integrations/InfluxdbCard.tsx
+++ b/ui/src/views/applications/integrations/InfluxdbCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -13,46 +12,44 @@ interface IProps {
add?: boolean;
}
-class InfluxdbCard extends Component {
- onDelete = () => {
+function InfluxdbCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteInfluxDbIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteInfluxDbIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default InfluxdbCard;
diff --git a/ui/src/views/applications/integrations/LoRaCloudCard.tsx b/ui/src/views/applications/integrations/LoRaCloudCard.tsx
index 53ee0496..ddf605f4 100644
--- a/ui/src/views/applications/integrations/LoRaCloudCard.tsx
+++ b/ui/src/views/applications/integrations/LoRaCloudCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -13,46 +12,44 @@ interface IProps {
add?: boolean;
}
-class LoRaCloudCard extends Component {
- onDelete = () => {
+function LoRaCloudCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteLoraCloudIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteLoraCloudIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default LoRaCloudCard;
diff --git a/ui/src/views/applications/integrations/LoRaCloudIntegrationForm.tsx b/ui/src/views/applications/integrations/LoRaCloudIntegrationForm.tsx
index c5d0bf1b..43fc9f36 100644
--- a/ui/src/views/applications/integrations/LoRaCloudIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/LoRaCloudIntegrationForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Form, Input, InputNumber, Switch, Button, Tabs, Collapse } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@@ -13,43 +13,28 @@ interface IProps {
onFinish: (obj: LoraCloudIntegration) => void;
}
-interface IState {
- modemEnabled: boolean;
- geolocationTdoa: boolean;
- geolocationRssi: boolean;
- geolocationWifi: boolean;
- geolocationGnss: boolean;
-}
+function LoRaCloudIntegrationForm(props: IProps) {
+ const [modemEnabled, setModemEnabled] = useState(false);
+ const [geolocationTdoa, setGeolocationTdoa] = useState(false);
+ const [geolocationRssi, setGeolocationRssi] = useState(false);
+ const [geolocationWifi, setGeolocationWifi] = useState(false);
+ const [geolocationGnss, setGeolocationGnss] = useState(false);
-class LoRaCloudIntegrationForm extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- modemEnabled: false,
- geolocationTdoa: false,
- geolocationRssi: false,
- geolocationWifi: false,
- geolocationGnss: false,
- };
- }
-
- componentDidMount() {
- const v = this.props.initialValues;
+ useEffect(() => {
+ const v = props.initialValues;
const mgs = v.getModemGeolocationServices();
if (mgs !== undefined) {
- this.setState({
- modemEnabled: mgs.getModemEnabled(),
- geolocationTdoa: mgs.getGeolocationTdoa(),
- geolocationRssi: mgs.getGeolocationRssi(),
- geolocationWifi: mgs.getGeolocationWifi(),
- geolocationGnss: mgs.getGeolocationGnss(),
- });
+ setModemEnabled(mgs.getModemEnabled());
+ setGeolocationTdoa(mgs.getGeolocationTdoa());
+ setGeolocationRssi(mgs.getGeolocationRssi());
+ setGeolocationWifi(mgs.getGeolocationWifi());
+ setGeolocationGnss(mgs.getGeolocationGnss());
}
- }
+ }, [props]);
- onFinish = (values: LoraCloudIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: LoraCloudIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
const mgsv = v.modemGeolocationServices;
let mgs = new LoraCloudModemGeolocationServices();
@@ -76,202 +61,194 @@ class LoRaCloudIntegrationForm extends Component {
i.setApplicationId(v.applicationId);
i.setModemGeolocationServices(mgs);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- onModemEnabledChange = (v: boolean) => {
- this.setState({
- modemEnabled: v,
- });
+ const onModemEnabledChange = (v: boolean) => {
+ setModemEnabled(v);
};
- onGeolocationTdoaChange = (v: boolean) => {
- this.setState({
- geolocationTdoa: v,
- });
+ const onGeolocationTdoaChange = (v: boolean) => {
+ setGeolocationTdoa(v);
};
- onGeolocationRssiChange = (v: boolean) => {
- this.setState({
- geolocationRssi: v,
- });
+ const onGeolocationRssiChange = (v: boolean) => {
+ setGeolocationRssi(v);
};
- onGeolocationWifiChange = (v: boolean) => {
- this.setState({
- geolocationWifi: v,
- });
+ const onGeolocationWifiChange = (v: boolean) => {
+ setGeolocationWifi(v);
};
- onGeolocationGnssChange = (v: boolean) => {
- this.setState({
- geolocationGnss: v,
- });
+ const onGeolocationGnssChange = (v: boolean) => {
+ setGeolocationGnss(v);
};
- render() {
- return (
-
+ );
}
export default LoRaCloudIntegrationForm;
diff --git a/ui/src/views/applications/integrations/MqttCard.tsx b/ui/src/views/applications/integrations/MqttCard.tsx
index ec6d0c62..ae3815a4 100644
--- a/ui/src/views/applications/integrations/MqttCard.tsx
+++ b/ui/src/views/applications/integrations/MqttCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card } from "antd";
@@ -9,23 +8,21 @@ interface IProps {
application: Application;
}
-class HttpCard extends Component {
- render() {
- let actions: any[] = [Get certificate];
+function MqttCard(props: IProps) {
+ let actions: any[] = [Get certificate];
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
- }
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
-export default HttpCard;
+export default MqttCard;
diff --git a/ui/src/views/applications/integrations/MyDevicesCard.tsx b/ui/src/views/applications/integrations/MyDevicesCard.tsx
index 9102dc67..34e3e327 100644
--- a/ui/src/views/applications/integrations/MyDevicesCard.tsx
+++ b/ui/src/views/applications/integrations/MyDevicesCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -13,46 +12,44 @@ interface IProps {
add?: boolean;
}
-class MyDevicesCard extends Component {
- onDelete = () => {
+function MyDevicesCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteMyDevicesIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteMyDevicesIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default MyDevicesCard;
diff --git a/ui/src/views/applications/integrations/MyDevicesIntegrationForm.tsx b/ui/src/views/applications/integrations/MyDevicesIntegrationForm.tsx
index 99c46a98..7bb671c5 100644
--- a/ui/src/views/applications/integrations/MyDevicesIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/MyDevicesIntegrationForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import { Form, Input, Button, Select } from "antd";
@@ -9,79 +9,63 @@ interface IProps {
onFinish: (obj: MyDevicesIntegration) => void;
}
-interface IState {
- selectedEndpoint: string;
- customEndpoint: string;
-}
+function MyDevicesIntegrationForm(props: IProps) {
+ const [selectedEndpoint, setSelectedEndpoint] = useState("");
+ const [customEndpoint, setCustomEndpoint] = useState("");
-class MyDevicesIntegrationForm extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- selectedEndpoint: "",
- customEndpoint: "",
- };
- }
-
- onFinish = (values: MyDevicesIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: MyDevicesIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new MyDevicesIntegration();
i.setApplicationId(v.applicationId);
if (v.endpoint === "custom") {
- i.setEndpoint(this.state.customEndpoint);
+ i.setEndpoint(customEndpoint);
} else {
i.setEndpoint(v.endpoint);
}
- this.props.onFinish(i);
+ props.onFinish(i);
};
- onEndpointChange = (v: string) => {
- this.setState({
- selectedEndpoint: v,
- });
+ const onEndpointChange = (v: string) => {
+ setSelectedEndpoint(v);
};
- onCustomEndpointChange = (e: React.ChangeEvent) => {
- this.setState({
- customEndpoint: e.target.value,
- });
+ const onCustomEndpointChange = (e: React.ChangeEvent) => {
+ setCustomEndpoint(e.target.value);
};
- render() {
- return (
-
- );
- }
+ )}
+
+
+
+
+ );
}
export default MyDevicesIntegrationForm;
diff --git a/ui/src/views/applications/integrations/PilotThingsCard.tsx b/ui/src/views/applications/integrations/PilotThingsCard.tsx
index ba0fd694..08e32136 100644
--- a/ui/src/views/applications/integrations/PilotThingsCard.tsx
+++ b/ui/src/views/applications/integrations/PilotThingsCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -16,46 +15,44 @@ interface IProps {
add?: boolean;
}
-class PilotThingsCard extends Component {
- onDelete = () => {
+function PilotThingsCard(props: IProps) {
+ const onDelete = () => {
let req = new DeletePilotThingsIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deletePilotThingsIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default PilotThingsCard;
diff --git a/ui/src/views/applications/integrations/PilotThingsIntegrationForm.tsx b/ui/src/views/applications/integrations/PilotThingsIntegrationForm.tsx
index 5550a459..06e0a63c 100644
--- a/ui/src/views/applications/integrations/PilotThingsIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/PilotThingsIntegrationForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Form, Input, Button } from "antd";
import { PilotThingsIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@@ -9,43 +7,41 @@ interface IProps {
onFinish: (obj: PilotThingsIntegration) => void;
}
-class PilotThingsIntegrationForm extends Component {
- onFinish = (values: PilotThingsIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+function PilotThingsIntegrationForm(props: IProps) {
+ const onFinish = (values: PilotThingsIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new PilotThingsIntegration();
i.setApplicationId(v.applicationId);
i.setServer(v.server);
i.setToken(v.token);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default PilotThingsIntegrationForm;
diff --git a/ui/src/views/applications/integrations/ThingsBoardCard.tsx b/ui/src/views/applications/integrations/ThingsBoardCard.tsx
index aac2f41a..e0ea07a2 100644
--- a/ui/src/views/applications/integrations/ThingsBoardCard.tsx
+++ b/ui/src/views/applications/integrations/ThingsBoardCard.tsx
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Col, Card, Popconfirm } from "antd";
@@ -16,46 +15,44 @@ interface IProps {
add?: boolean;
}
-class ThingsBoardCard extends Component {
- onDelete = () => {
+function ThingsBoardCard(props: IProps) {
+ const onDelete = () => {
let req = new DeleteThingsBoardIntegrationRequest();
- req.setApplicationId(this.props.application.getId());
+ req.setApplicationId(props.application.getId());
ApplicationStore.deleteThingsBoardIntegration(req, () => {});
};
- render() {
- let actions: any[] = [];
+ let actions: any[] = [];
- if (!!this.props.add) {
- actions = [
-
-
- ,
- ];
- } else {
- actions = [
-
-
- ,
-
-
- ,
- ];
- }
-
- return (
-
- }
- actions={actions}
- >
-
-
-
- );
+ if (!!props.add) {
+ actions = [
+
+
+ ,
+ ];
+ } else {
+ actions = [
+
+
+ ,
+
+
+ ,
+ ];
}
+
+ return (
+
+ }
+ actions={actions}
+ >
+
+
+
+ );
}
export default ThingsBoardCard;
diff --git a/ui/src/views/applications/integrations/ThingsBoardIntegrationForm.tsx b/ui/src/views/applications/integrations/ThingsBoardIntegrationForm.tsx
index 90018644..aec99b5f 100644
--- a/ui/src/views/applications/integrations/ThingsBoardIntegrationForm.tsx
+++ b/ui/src/views/applications/integrations/ThingsBoardIntegrationForm.tsx
@@ -1,5 +1,3 @@
-import React, { Component } from "react";
-
import { Form, Input, Button, Typography } from "antd";
import { ThingsBoardIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@@ -9,41 +7,44 @@ interface IProps {
onFinish: (obj: ThingsBoardIntegration) => void;
}
-class ThingsBoardIntegrationForm extends Component {
- onFinish = (values: ThingsBoardIntegration.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+function ThingsBoardIntegrationForm(props: IProps) {
+ const onFinish = (values: ThingsBoardIntegration.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let i = new ThingsBoardIntegration();
i.setApplicationId(v.applicationId);
i.setServer(v.server);
- this.props.onFinish(i);
+ props.onFinish(i);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
export default ThingsBoardIntegrationForm;
diff --git a/ui/src/views/dashboard/Dashboard.tsx b/ui/src/views/dashboard/Dashboard.tsx
index b330e52c..f891cd01 100644
--- a/ui/src/views/dashboard/Dashboard.tsx
+++ b/ui/src/views/dashboard/Dashboard.tsx
@@ -1,8 +1,9 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { presetPalettes } from "@ant-design/colors";
-import { Space, Breadcrumb, Card, Row, Col, PageHeader, Empty } from "antd";
+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";
@@ -27,167 +28,125 @@ import InternalStore from "../../stores/InternalStore";
import GatewayStore from "../../stores/GatewayStore";
import Map, { Marker, MarkerColor } from "../../components/Map";
-interface GatewaysMapState {
- items: GatewayListItem[];
-}
+function GatewaysMap() {
+ const [items, setItems] = useState([]);
-class GatewaysMap extends Component<{}, GatewaysMapState> {
- constructor(props: {}) {
- super(props);
-
- this.state = {
- items: [],
- };
- }
-
- componentDidMount() {
- this.loadData();
- }
-
- loadData = () => {
+ useEffect(() => {
let req = new ListGatewaysRequest();
req.setLimit(9999);
GatewayStore.list(req, (resp: ListGatewaysResponse) => {
- this.setState({
- items: resp.getResultList(),
- });
+ setItems(resp.getResultList());
});
+ }, []);
+
+ if (items.length === 0) {
+ return ;
+ }
+
+ const boundsOptions: {
+ padding: PointTuple;
+ } = {
+ padding: [50, 50],
};
- render() {
- if (this.state.items.length === 0) {
- return ;
+ let bounds: LatLngTuple[] = [];
+ let markers: any[] = [];
+
+ for (const item of items) {
+ const pos: LatLngTuple = [item.getLocation()!.getLatitude(), item.getLocation()!.getLongitude()];
+ bounds.push(pos);
+
+ let color: MarkerColor = "orange";
+ let lastSeen: string = "Never seen online";
+
+ if (item.getState() === GatewayState.OFFLINE) {
+ color = "red";
+ } else if (item.getState() === GatewayState.ONLINE) {
+ color = "green";
}
- const boundsOptions: {
- padding: PointTuple;
- } = {
- padding: [50, 50],
- };
-
- let bounds: LatLngTuple[] = [];
- let markers: any[] = [];
-
- for (const item of this.state.items) {
- const pos: LatLngTuple = [item.getLocation()!.getLatitude(), item.getLocation()!.getLongitude()];
- bounds.push(pos);
-
- let color: MarkerColor = "orange";
- let lastSeen: string = "Never seen online";
-
- if (item.getState() === GatewayState.OFFLINE) {
- color = "red";
- } else if (item.getState() === GatewayState.ONLINE) {
- color = "green";
- }
-
- if (item.getLastSeenAt() !== undefined) {
- let ts = moment(item.getLastSeenAt()!.toDate());
- lastSeen = ts.fromNow();
- }
-
- markers.push(
-
-
- {item.getName()}
-
- {item.getGatewayId()}
-
-
- {lastSeen}
-
- ,
- );
+ if (item.getLastSeenAt() !== undefined) {
+ let ts = moment(item.getLastSeenAt()!.toDate());
+ lastSeen = ts.fromNow();
}
- return (
-
+ markers.push(
+
+
+ {item.getName()}
+
+ {item.getGatewayId()}
+
+
+ {lastSeen}
+
+ ,
);
}
+
+ return (
+
+ );
}
-interface GatewayProps {
- summary?: GetGatewaysSummaryResponse;
-}
-
-class GatewaysActiveInactive extends Component {
- render() {
- if (
- this.props.summary === undefined ||
- (this.props.summary.getNeverSeenCount() === 0 &&
- this.props.summary.getOfflineCount() === 0 &&
- this.props.summary.getOnlineCount() === 0)
- ) {
- return ;
- }
-
- const data = {
- labels: ["Never seen", "Offline", "Online"],
- datasets: [
- {
- data: [
- this.props.summary.getNeverSeenCount(),
- this.props.summary.getOfflineCount(),
- this.props.summary.getOnlineCount(),
- ],
- backgroundColor: [presetPalettes.orange.primary, presetPalettes.red.primary, presetPalettes.green.primary],
- },
- ],
- };
-
- const options: {
- animation: false;
- } = {
- animation: false,
- };
-
- return ;
+function DevicesActiveInactive({ summary }: { summary?: GetDevicesSummaryResponse }) {
+ if (
+ summary === undefined ||
+ (summary.getNeverSeenCount() === 0 && summary.getInactiveCount() === 0 && summary.getActiveCount() === 0)
+ ) {
+ return ;
}
+
+ const data = {
+ labels: ["Never seen", "Inactive", "Active"],
+ datasets: [
+ {
+ data: [summary.getNeverSeenCount(), summary.getInactiveCount(), summary.getActiveCount()],
+ backgroundColor: [presetPalettes.orange.primary, presetPalettes.red.primary, presetPalettes.green.primary],
+ },
+ ],
+ };
+
+ const options: {
+ animation: false;
+ } = {
+ animation: false,
+ };
+
+ return ;
}
-interface DeviceProps {
- summary?: GetDevicesSummaryResponse;
-}
-
-class DevicesActiveInactive extends Component {
- render() {
- if (
- this.props.summary === undefined ||
- (this.props.summary.getNeverSeenCount() === 0 &&
- this.props.summary.getInactiveCount() === 0 &&
- this.props.summary.getActiveCount() === 0)
- ) {
- return ;
- }
-
- const data = {
- labels: ["Never seen", "Inactive", "Active"],
- datasets: [
- {
- data: [
- this.props.summary.getNeverSeenCount(),
- this.props.summary.getInactiveCount(),
- this.props.summary.getActiveCount(),
- ],
- backgroundColor: [presetPalettes.orange.primary, presetPalettes.red.primary, presetPalettes.green.primary],
- },
- ],
- };
-
- const options: {
- animation: false;
- } = {
- animation: false,
- };
-
- return ;
+function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryResponse }) {
+ if (
+ summary === undefined ||
+ (summary.getNeverSeenCount() === 0 && summary.getOfflineCount() === 0 && summary.getOnlineCount() === 0)
+ ) {
+ return ;
}
+
+ const data = {
+ labels: ["Never seen", "Offline", "Online"],
+ datasets: [
+ {
+ data: [summary.getNeverSeenCount(), summary.getOfflineCount(), summary.getOnlineCount()],
+ backgroundColor: [presetPalettes.orange.primary, presetPalettes.red.primary, presetPalettes.green.primary],
+ },
+ ],
+ };
+
+ const options: {
+ animation: false;
+ } = {
+ animation: false,
+ };
+
+ return ;
}
-class DevicesDataRates extends Component {
- getColor = (dr: number) => {
+function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse }) {
+ const getColor = (dr: number) => {
return [
"#ff5722",
"#ff9800",
@@ -207,109 +166,92 @@ class DevicesDataRates extends Component {
][dr];
};
- render() {
- if (this.props.summary === undefined || this.props.summary.getDrCountMap().toArray().length === 0) {
- return ;
- }
-
- let data: {
- labels: string[];
- datasets: {
- data: number[];
- backgroundColor: string[];
- }[];
- } = {
- labels: [],
- datasets: [
- {
- data: [],
- backgroundColor: [],
- },
- ],
- };
-
- for (const elm of this.props.summary.getDrCountMap().toArray()) {
- data.labels.push(`DR${elm[0]}`);
- data.datasets[0].data.push(elm[1]);
- data.datasets[0].backgroundColor.push(this.getColor(elm[0]));
- }
-
- const options: {
- animation: false;
- } = {
- animation: false,
- };
-
- return ;
- }
-}
-
-interface IProps {}
-
-interface IState {
- gatewaysSummary?: GetGatewaysSummaryResponse;
- devicesSummary?: GetDevicesSummaryResponse;
-}
-
-class Dashboard extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
+ if (summary === undefined || summary.getDrCountMap().toArray().length === 0) {
+ return ;
}
- componentDidMount() {
+ let data: {
+ labels: string[];
+ datasets: {
+ data: number[];
+ backgroundColor: string[];
+ }[];
+ } = {
+ labels: [],
+ datasets: [
+ {
+ data: [],
+ backgroundColor: [],
+ },
+ ],
+ };
+
+ for (const elm of summary.getDrCountMap().toArray()) {
+ data.labels.push(`DR${elm[0]}`);
+ data.datasets[0].data.push(elm[1]);
+ data.datasets[0].backgroundColor.push(getColor(elm[0]));
+ }
+
+ const options: {
+ animation: false;
+ } = {
+ animation: false,
+ };
+
+ return ;
+}
+
+function Dashboard() {
+ const [gatewaysSummary, setGatewaysSummary] = useState(undefined);
+ const [devicesSummary, setDevicesSummary] = useState(undefined);
+
+ useEffect(() => {
InternalStore.getGatewaysSummary(new GetGatewaysSummaryRequest(), (resp: GetGatewaysSummaryResponse) => {
- this.setState({
- gatewaysSummary: resp,
- });
+ setGatewaysSummary(resp);
});
InternalStore.getDevicesSummary(new GetDevicesSummaryRequest(), (resp: GetDevicesSummaryResponse) => {
- this.setState({
- devicesSummary: resp,
- });
+ setDevicesSummary(resp);
});
- }
+ }, []);
- render() {
- return (
-
- (
-
-
- Network Server
-
-
- Dashboard
-
-
- )}
- title="Dashboard"
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+ return (
+
+ (
+
+
+ Network Server
+
+
+ Dashboard
+
+
+ )}
+ title="Dashboard"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
}
export default Dashboard;
diff --git a/ui/src/views/device-profile-templates/CreateDeviceProfileTemplate.tsx b/ui/src/views/device-profile-templates/CreateDeviceProfileTemplate.tsx
index 00ee0a84..89e2878d 100644
--- a/ui/src/views/device-profile-templates/CreateDeviceProfileTemplate.tsx
+++ b/ui/src/views/device-profile-templates/CreateDeviceProfileTemplate.tsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import { Link, RouteComponentProps } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
-import { Space, Breadcrumb, Card, PageHeader } from "antd";
+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 {
@@ -12,86 +12,86 @@ import {
import DeviceProfileTemplateForm from "./DeviceProfileTemplateForm";
import DeviceProfileTemplateStore from "../../stores/DeviceProfileTemplateStore";
-class CreateDeviceProfileTemplate extends Component {
- onFinish = (obj: DeviceProfileTemplate) => {
+function CreateDeviceProfileTemplate() {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: DeviceProfileTemplate) => {
let req = new CreateDeviceProfileTemplateRequest();
req.setDeviceProfileTemplate(obj);
DeviceProfileTemplateStore.create(req, () => {
- this.props.history.push(`/device-profile-templates`);
+ navigate(`/device-profile-templates`);
});
};
- render() {
- const codecScript = `// Decode uplink function.
-//
-// Input is an object with the following fields:
-// - bytes = Byte array containing the uplink payload, e.g. [255, 230, 255, 0]
-// - fPort = Uplink fPort.
-// - variables = Object containing the configured device variables.
-//
-// Output must be an object with the following fields:
-// - data = Object representing the decoded payload.
-function decodeUplink(input) {
- return {
- data: {
- temp: 22.5
- }
- };
-}
-
-// Encode downlink function.
-//
-// Input is an object with the following fields:
-// - data = Object representing the payload that must be encoded.
-// - variables = Object containing the configured device variables.
-//
-// Output must be an object with the following fields:
-// - bytes = Byte array containing the downlink payload.
-function encodeDownlink(input) {
- return {
- bytes: [225, 230, 255, 0]
- };
-}
-`;
-
- let deviceProfileTemplate = new DeviceProfileTemplate();
- deviceProfileTemplate.setPayloadCodecScript(codecScript);
- deviceProfileTemplate.setSupportsOtaa(true);
- deviceProfileTemplate.setUplinkInterval(3600);
- deviceProfileTemplate.setDeviceStatusReqInterval(1);
- deviceProfileTemplate.setAdrAlgorithmId("default");
- deviceProfileTemplate.setMacVersion(MacVersion.LORAWAN_1_0_3);
- deviceProfileTemplate.setRegParamsRevision(RegParamsRevision.A);
- deviceProfileTemplate.setFlushQueueOnActivate(true);
- deviceProfileTemplate.setAutoDetectMeasurements(true);
-
- return (
-
- (
-
-
- Network Server
-
-
-
- Device-profile templates
-
-
-
- Add
-
-
- )}
- title="Add device-profile template"
- />
-
-
-
-
- );
+ const codecScript = `// Decode uplink function.
+ //
+ // Input is an object with the following fields:
+ // - bytes = Byte array containing the uplink payload, e.g. [255, 230, 255, 0]
+ // - fPort = Uplink fPort.
+ // - variables = Object containing the configured device variables.
+ //
+ // Output must be an object with the following fields:
+ // - data = Object representing the decoded payload.
+ function decodeUplink(input) {
+ return {
+ data: {
+ temp: 22.5
+ }
+ };
}
+
+ // Encode downlink function.
+ //
+ // Input is an object with the following fields:
+ // - data = Object representing the payload that must be encoded.
+ // - variables = Object containing the configured device variables.
+ //
+ // Output must be an object with the following fields:
+ // - bytes = Byte array containing the downlink payload.
+ function encodeDownlink(input) {
+ return {
+ bytes: [225, 230, 255, 0]
+ };
+ }
+ `;
+
+ let deviceProfileTemplate = new DeviceProfileTemplate();
+ deviceProfileTemplate.setPayloadCodecScript(codecScript);
+ deviceProfileTemplate.setSupportsOtaa(true);
+ deviceProfileTemplate.setUplinkInterval(3600);
+ deviceProfileTemplate.setDeviceStatusReqInterval(1);
+ deviceProfileTemplate.setAdrAlgorithmId("default");
+ deviceProfileTemplate.setMacVersion(MacVersion.LORAWAN_1_0_3);
+ deviceProfileTemplate.setRegParamsRevision(RegParamsRevision.A);
+ deviceProfileTemplate.setFlushQueueOnActivate(true);
+ deviceProfileTemplate.setAutoDetectMeasurements(true);
+
+ return (
+
+ (
+
+
+ Network Server
+
+
+
+ Device-profile templates
+
+
+
+ Add
+
+
+ )}
+ title="Add device-profile template"
+ />
+
+
+
+
+ );
}
export default CreateDeviceProfileTemplate;
diff --git a/ui/src/views/device-profile-templates/DeviceProfileTemplateForm.tsx b/ui/src/views/device-profile-templates/DeviceProfileTemplateForm.tsx
index 8373556d..4eae5871 100644
--- a/ui/src/views/device-profile-templates/DeviceProfileTemplateForm.tsx
+++ b/ui/src/views/device-profile-templates/DeviceProfileTemplateForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Form, Input, Select, InputNumber, Switch, Row, Col, Button, Tabs, Card } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@@ -17,37 +17,20 @@ interface IProps {
update?: boolean;
}
-interface IState {
- supportsOtaa: boolean;
- supportsClassB: boolean;
- supportsClassC: boolean;
- payloadCodecRuntime: CodecRuntime;
- adrAlgorithms: [string, string][];
-}
+function DeviceProfileTemplateForm(props: IProps) {
+ const [form] = Form.useForm();
+ const [supportsOtaa, setSupportsOtaa] = useState(false);
+ const [supportsClassB, setSupportsClassB] = useState(false);
+ const [supportsClassC, setSupportsClassC] = useState(false);
+ const [payloadCodecRuntime, setPayloadCodecRuntime] = useState(CodecRuntime.NONE);
+ const [adrAlgorithms, setAdrAlgorithms] = useState<[string, string][]>([]);
-class DeviceProfileTemplateForm extends Component {
- formRef = React.createRef();
-
- constructor(props: IProps) {
- super(props);
- this.state = {
- supportsOtaa: false,
- supportsClassB: false,
- supportsClassC: false,
- payloadCodecRuntime: CodecRuntime.NONE,
- adrAlgorithms: [],
- };
- }
-
- componentDidMount() {
- const v = this.props.initialValues;
-
- this.setState({
- supportsOtaa: v.getSupportsOtaa(),
- supportsClassB: v.getSupportsClassB(),
- supportsClassC: v.getSupportsClassC(),
- payloadCodecRuntime: v.getPayloadCodecRuntime(),
- });
+ useEffect(() => {
+ const v = props.initialValues;
+ setSupportsOtaa(v.getSupportsOtaa());
+ setSupportsClassB(v.getSupportsClassB());
+ setSupportsClassC(v.getSupportsClassC());
+ setPayloadCodecRuntime(v.getPayloadCodecRuntime());
DeviceProfileStore.listAdrAlgorithms((resp: ListDeviceProfileAdrAlgorithmsResponse) => {
let adrAlgorithms: [string, string][] = [];
@@ -55,14 +38,12 @@ class DeviceProfileTemplateForm extends Component {
adrAlgorithms.push([a.getId(), a.getName()]);
}
- this.setState({
- adrAlgorithms: adrAlgorithms,
- });
+ setAdrAlgorithms(adrAlgorithms);
});
- }
+ }, [props.initialValues]);
- onFinish = (values: DeviceProfileTemplate.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: DeviceProfileTemplate.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let dp = new DeviceProfileTemplate();
dp.setId(v.id);
@@ -114,454 +95,487 @@ class DeviceProfileTemplateForm extends Component {
}
dp.setAutoDetectMeasurements(v.autoDetectMeasurements);
- this.props.onFinish(dp);
+ props.onFinish(dp);
};
- onSupportsOtaaChange = (checked: boolean) => {
- this.setState({
- supportsOtaa: checked,
- });
+ const onSupportsOtaaChange = (checked: boolean) => {
+ setSupportsOtaa(checked);
};
- onSupportsClassBChnage = (checked: boolean) => {
- this.setState({
- supportsClassB: checked,
- });
+ const onSupportsClassBChnage = (checked: boolean) => {
+ setSupportsClassB(checked);
};
- onSupportsClassCChange = (checked: boolean) => {
- this.setState({
- supportsClassC: checked,
- });
+ const onSupportsClassCChange = (checked: boolean) => {
+ setSupportsClassC(checked);
};
- onPayloadCodecRuntimeChange = (value: CodecRuntime) => {
- this.setState({
- payloadCodecRuntime: value,
- });
+ const onPayloadCodecRuntimeChange = (value: CodecRuntime) => {
+ setPayloadCodecRuntime(value);
};
- render() {
- const adrOptions = this.state.adrAlgorithms.map(v => {v[1]});
+ const adrOptions = adrAlgorithms.map(v => {v[1]});
- return (
-
+ );
}
export default DeviceProfileTemplateForm;
diff --git a/ui/src/views/device-profile-templates/EditDeviceProfileTemplate.tsx b/ui/src/views/device-profile-templates/EditDeviceProfileTemplate.tsx
index cdd9ec63..348db401 100644
--- a/ui/src/views/device-profile-templates/EditDeviceProfileTemplate.tsx
+++ b/ui/src/views/device-profile-templates/EditDeviceProfileTemplate.tsx
@@ -1,7 +1,9 @@
-import React, { Component } from "react";
-import { RouteComponentProps, Link } from "react-router-dom";
+import React, { useState, useEffect } from "react";
-import { Space, Breadcrumb, Card, Button, PageHeader } from "antd";
+import { useParams, Link, useNavigate } from "react-router-dom";
+
+import { Space, Breadcrumb, Card, Button } from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
import {
DeviceProfileTemplate,
@@ -15,101 +17,78 @@ import DeviceProfileTemplateForm from "./DeviceProfileTemplateForm";
import DeviceProfileTemplateStore from "../../stores/DeviceProfileTemplateStore";
import DeleteConfirm from "../../components/DeleteConfirm";
-interface IState {
- deviceProfileTemplate?: DeviceProfileTemplate;
-}
+function EditDeviceProfileTemplate() {
+ const navigate = useNavigate();
+ const [deviceProfileTemplate, setDeviceProfileTemplate] = useState(undefined);
+ const { deviceProfileTemplateId } = useParams();
-interface MatchParams {
- deviceProfileTemplateId: string;
-}
-
-interface IProps extends RouteComponentProps {}
-
-class EditDeviceProfileTemplate extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
-
- componentDidMount() {
- this.getDeviceProfileTemplate();
- }
-
- getDeviceProfileTemplate = () => {
- const id = this.props.match.params.deviceProfileTemplateId;
+ useEffect(() => {
+ const id = deviceProfileTemplateId!;
let req = new GetDeviceProfileTemplateRequest();
req.setId(id);
DeviceProfileTemplateStore.get(req, (resp: GetDeviceProfileTemplateResponse) => {
- this.setState({
- deviceProfileTemplate: resp.getDeviceProfileTemplate(),
- });
+ setDeviceProfileTemplate(resp.getDeviceProfileTemplate());
});
- };
+ }, [deviceProfileTemplateId]);
- onFinish = (obj: DeviceProfileTemplate) => {
+ const onFinish = (obj: DeviceProfileTemplate) => {
let req = new UpdateDeviceProfileTemplateRequest();
req.setDeviceProfileTemplate(obj);
DeviceProfileTemplateStore.update(req, () => {
- this.props.history.push(`/device-profile-templates`);
+ navigate(`/device-profile-templates`);
});
};
- deleteDeviceProfileTemplate = () => {
+ const deleteDeviceProfileTemplate = () => {
let req = new DeleteDeviceProfileTemplateRequest();
- req.setId(this.props.match.params.deviceProfileTemplateId);
+ req.setId(deviceProfileTemplateId!);
DeviceProfileTemplateStore.delete(req, () => {
- this.props.history.push(`/device-profile-templates`);
+ navigate(`/device-profile-templates`);
});
};
- render() {
- const dp = this.state.deviceProfileTemplate;
+ const dp = deviceProfileTemplate;
- if (!dp) {
- return null;
- }
-
- return (
-
- (
-
-
- Network Server
-
-
-
- Device-profile templates
-
-
-
- {dp.getName()}
-
-
- )}
- title={dp.getName()}
- subTitle={`device-profile template id: ${dp.getId()}`}
- extra={[
-
-
- ,
- ]}
- />
-
-
-
-
- );
+ if (!dp) {
+ return null;
}
+
+ return (
+
+ (
+
+
+ Network Server
+
+
+
+ Device-profile templates
+
+
+
+ {dp.getName()}
+
+
+ )}
+ title={dp.getName()}
+ subTitle={`device-profile template id: ${dp.getId()}`}
+ extra={[
+
+
+ ,
+ ]}
+ />
+
+
+
+
+ );
}
export default EditDeviceProfileTemplate;
diff --git a/ui/src/views/device-profile-templates/ListDeviceProfileTemplates.tsx b/ui/src/views/device-profile-templates/ListDeviceProfileTemplates.tsx
index 147d51fb..a5b85073 100644
--- a/ui/src/views/device-profile-templates/ListDeviceProfileTemplates.tsx
+++ b/ui/src/views/device-profile-templates/ListDeviceProfileTemplates.tsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
-import { Space, Breadcrumb, Button, PageHeader } from "antd";
+import { Space, Breadcrumb, Button } from "antd";
import { ColumnsType } from "antd/es/table";
+import { PageHeader } from "@ant-design/pro-layout";
import {
ListDeviceProfileTemplatesRequest,
@@ -15,38 +15,36 @@ import { getEnumName } from "../helpers";
import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
import DeviceProfileTemplateStore from "../../stores/DeviceProfileTemplateStore";
-class ListDeviceProfileTemplates extends Component {
- columns = (): ColumnsType => {
- return [
- {
- title: "Vendor",
- dataIndex: "vendor",
- key: "vendor",
+function ListDeviceProfileTemplates() {
+ const columns: ColumnsType = [
+ {
+ title: "Vendor",
+ dataIndex: "vendor",
+ key: "vendor",
+ },
+ {
+ title: "Name",
+ dataIndex: "name",
+ key: "name",
+ render: (text, record) => {text},
+ },
+ {
+ title: "Firmware",
+ dataIndex: "firmware",
+ key: "firmware",
+ },
+ {
+ title: "Region",
+ dataIndex: "region",
+ key: "region",
+ width: 150,
+ render: (text, record) => {
+ return getEnumName(Region, record.region);
},
- {
- title: "Name",
- dataIndex: "name",
- key: "name",
- render: (text, record) => {text},
- },
- {
- title: "Firmware",
- dataIndex: "firmware",
- key: "firmware",
- },
- {
- title: "Region",
- dataIndex: "region",
- key: "region",
- width: 150,
- render: (text, record) => {
- return getEnumName(Region, record.region);
- },
- },
- ];
- };
+ },
+ ];
- getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
+ const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListDeviceProfileTemplatesRequest();
req.setLimit(limit);
req.setOffset(offset);
@@ -57,31 +55,29 @@ class ListDeviceProfileTemplates extends Component {
});
};
- render() {
- return (
-
- (
-
-
- Network Server
-
-
- Device-profile templates
-
-
- )}
- title="Device-profile templates"
- extra={[
- ,
- ]}
- />
-
-
- );
- }
+ return (
+
+ (
+
+
+ Network Server
+
+
+ Device-profile templates
+
+
+ )}
+ title="Device-profile templates"
+ extra={[
+ ,
+ ]}
+ />
+
+
+ );
}
export default ListDeviceProfileTemplates;
diff --git a/ui/src/views/device-profiles/CreateDeviceProfile.tsx b/ui/src/views/device-profiles/CreateDeviceProfile.tsx
index 1cb0ce51..9ea64760 100644
--- a/ui/src/views/device-profiles/CreateDeviceProfile.tsx
+++ b/ui/src/views/device-profiles/CreateDeviceProfile.tsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import { Link, RouteComponentProps } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
-import { Space, Breadcrumb, Card, PageHeader } from "antd";
+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 {
@@ -15,97 +15,97 @@ import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import DeviceProfileForm from "./DeviceProfileForm";
import DeviceProfileStore from "../../stores/DeviceProfileStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
tenant: Tenant;
}
-class CreateDeviceProfile extends Component {
- onFinish = (obj: DeviceProfile) => {
- obj.setTenantId(this.props.tenant.getId());
+function CreateDeviceProfile(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: DeviceProfile) => {
+ obj.setTenantId(props.tenant.getId());
let req = new CreateDeviceProfileRequest();
req.setDeviceProfile(obj);
DeviceProfileStore.create(req, (_resp: CreateDeviceProfileResponse) => {
- this.props.history.push(`/tenants/${this.props.tenant.getId()}/device-profiles`);
+ navigate(`/tenants/${props.tenant.getId()}/device-profiles`);
});
};
- render() {
- const codecScript = `// Decode uplink function.
-//
-// Input is an object with the following fields:
-// - bytes = Byte array containing the uplink payload, e.g. [255, 230, 255, 0]
-// - fPort = Uplink fPort.
-// - variables = Object containing the configured device variables.
-//
-// Output must be an object with the following fields:
-// - data = Object representing the decoded payload.
-function decodeUplink(input) {
- return {
- data: {
- temp: 22.5
- }
- };
-}
-
-// Encode downlink function.
-//
-// Input is an object with the following fields:
-// - data = Object representing the payload that must be encoded.
-// - variables = Object containing the configured device variables.
-//
-// Output must be an object with the following fields:
-// - bytes = Byte array containing the downlink payload.
-function encodeDownlink(input) {
- return {
- bytes: [225, 230, 255, 0]
- };
-}
-`;
-
- let deviceProfile = new DeviceProfile();
- deviceProfile.setPayloadCodecScript(codecScript);
- deviceProfile.setSupportsOtaa(true);
- deviceProfile.setUplinkInterval(3600);
- deviceProfile.setDeviceStatusReqInterval(1);
- deviceProfile.setAdrAlgorithmId("default");
- deviceProfile.setMacVersion(MacVersion.LORAWAN_1_0_3);
- deviceProfile.setRegParamsRevision(RegParamsRevision.A);
- deviceProfile.setFlushQueueOnActivate(true);
- deviceProfile.setAutoDetectMeasurements(true);
-
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
-
- Device profiles
-
-
-
- Add
-
-
- )}
- title="Add device profile"
- />
-
-
-
-
- );
+ const codecScript = `// Decode uplink function.
+ //
+ // Input is an object with the following fields:
+ // - bytes = Byte array containing the uplink payload, e.g. [255, 230, 255, 0]
+ // - fPort = Uplink fPort.
+ // - variables = Object containing the configured device variables.
+ //
+ // Output must be an object with the following fields:
+ // - data = Object representing the decoded payload.
+ function decodeUplink(input) {
+ return {
+ data: {
+ temp: 22.5
+ }
+ };
}
+
+ // Encode downlink function.
+ //
+ // Input is an object with the following fields:
+ // - data = Object representing the payload that must be encoded.
+ // - variables = Object containing the configured device variables.
+ //
+ // Output must be an object with the following fields:
+ // - bytes = Byte array containing the downlink payload.
+ function encodeDownlink(input) {
+ return {
+ bytes: [225, 230, 255, 0]
+ };
+ }
+ `;
+
+ let deviceProfile = new DeviceProfile();
+ deviceProfile.setPayloadCodecScript(codecScript);
+ deviceProfile.setSupportsOtaa(true);
+ deviceProfile.setUplinkInterval(3600);
+ deviceProfile.setDeviceStatusReqInterval(1);
+ deviceProfile.setAdrAlgorithmId("default");
+ deviceProfile.setMacVersion(MacVersion.LORAWAN_1_0_3);
+ deviceProfile.setRegParamsRevision(RegParamsRevision.A);
+ deviceProfile.setFlushQueueOnActivate(true);
+ deviceProfile.setAutoDetectMeasurements(true);
+
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+
+ Device profiles
+
+
+
+ Add
+
+
+ )}
+ title="Add device profile"
+ />
+
+
+
+
+ );
}
export default CreateDeviceProfile;
diff --git a/ui/src/views/device-profiles/DeviceProfileForm.tsx b/ui/src/views/device-profiles/DeviceProfileForm.tsx
index c26f16f7..a8394b00 100644
--- a/ui/src/views/device-profiles/DeviceProfileForm.tsx
+++ b/ui/src/views/device-profiles/DeviceProfileForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Form, Input, Select, InputNumber, Switch, Row, Col, Button, Tabs, Modal, Spin, Cascader, Card } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@@ -36,157 +36,135 @@ interface ModalProps {
visible: boolean;
}
-interface ModalState {
- templates: DeviceProfileTemplateListItem[];
- templatesLoaded: boolean;
- templateId?: string;
-}
-
interface Option {
value: string;
label: string;
children?: Option[];
}
-class TemplateModal extends Component {
- constructor(props: ModalProps) {
- super(props);
- this.state = {
- templates: [],
- templatesLoaded: false,
- };
- }
+function TemplateModal(props: ModalProps) {
+ const [templates, setTemplates] = useState([]);
+ const [templatesLoaded, setTemplatesLoaded] = useState(false);
+ const [templateId, setTemplateId] = useState(undefined);
- componentDidUpdate(prevProps: ModalProps) {
- if (prevProps === this.props) {
- return;
- }
-
- if (this.props.visible) {
- this.setState({
- templatesLoaded: false,
- });
+ useEffect(() => {
+ if (props.visible) {
+ setTemplatesLoaded(false);
let req = new ListDeviceProfileTemplatesRequest();
req.setLimit(99999);
DeviceProfileTemplateStore.list(req, (resp: ListDeviceProfileTemplatesResponse) => {
- this.setState({
- templatesLoaded: true,
- templates: resp.getResultList(),
- });
+ setTemplatesLoaded(true);
+ setTemplates(resp.getResultList());
});
}
- }
+ }, [props]);
- onChange = (value: (string | number)[]) => {
- this.setState({
- templateId: value.at(-1)! as string,
- });
+ const onChange = (value: (string | number)[]) => {
+ setTemplateId(value.at(-1)! as string);
};
- onOk = () => {
- if (this.state.templateId) {
+ const onOk = () => {
+ if (templateId) {
let req = new GetDeviceProfileTemplateRequest();
- req.setId(this.state.templateId);
+ req.setId(templateId);
DeviceProfileTemplateStore.get(req, (resp: GetDeviceProfileTemplateResponse) => {
const dp = resp.getDeviceProfileTemplate();
if (dp) {
- this.props.onOk(dp);
+ props.onOk(dp);
}
});
}
};
- render() {
- let options: Option[] = [];
- let vendor = "";
- let device = "";
- let firmware = "";
- let region = "";
+ let options: Option[] = [];
+ let vendor = "";
+ let device = "";
+ let firmware = "";
+ let region = "";
- for (const item of this.state.templates) {
- if (vendor !== item.getVendor()) {
- options.push({
- value: item.getId(),
- label: item.getVendor(),
- children: [],
- });
+ for (const item of templates) {
+ if (vendor !== item.getVendor()) {
+ options.push({
+ value: item.getId(),
+ label: item.getVendor(),
+ children: [],
+ });
- vendor = item.getVendor();
- device = "";
- firmware = "";
- region = "";
- }
-
- if (device !== item.getName()) {
- options.at(-1)!.children!.push({
- value: item.getId(),
- label: item.getName(),
- children: [],
- });
-
- device = item.getName();
- firmware = "";
- region = "";
- }
-
- if (firmware !== item.getFirmware()) {
- options
- .at(-1)!
- .children!.at(-1)!
- .children!.push({
- value: item.getId(),
- label: "FW version: " + item.getFirmware(),
- children: [],
- });
-
- firmware = item.getFirmware();
- region = "";
- }
-
- if (region !== getEnumName(Region, item.getRegion())) {
- options
- .at(-1)!
- .children!.at(-1)!
- .children!.at(-1)!
- .children!.push({
- value: item.getId(),
- label: getEnumName(Region, item.getRegion()),
- children: [],
- });
-
- region = getEnumName(Region, item.getRegion());
- }
+ vendor = item.getVendor();
+ device = "";
+ firmware = "";
+ region = "";
}
- return (
-
- {!this.state.templatesLoaded && (
-
-
-
- )}
- {this.state.templatesLoaded && (
-
- )}
-
- );
+ if (device !== item.getName()) {
+ options.at(-1)!.children!.push({
+ value: item.getId(),
+ label: item.getName(),
+ children: [],
+ });
+
+ device = item.getName();
+ firmware = "";
+ region = "";
+ }
+
+ if (firmware !== item.getFirmware()) {
+ options
+ .at(-1)!
+ .children!.at(-1)!
+ .children!.push({
+ value: item.getId(),
+ label: "FW version: " + item.getFirmware(),
+ children: [],
+ });
+
+ firmware = item.getFirmware();
+ region = "";
+ }
+
+ if (region !== getEnumName(Region, item.getRegion())) {
+ options
+ .at(-1)!
+ .children!.at(-1)!
+ .children!.at(-1)!
+ .children!.push({
+ value: item.getId(),
+ label: getEnumName(Region, item.getRegion()),
+ children: [],
+ });
+
+ region = getEnumName(Region, item.getRegion());
+ }
}
+
+ return (
+
+ {!templatesLoaded && (
+
+
+
+ )}
+ {templatesLoaded && (
+
+ )}
+
+ );
}
interface IProps {
@@ -195,69 +173,41 @@ interface IProps {
disabled?: boolean;
}
-interface IState {
- supportsOtaa: boolean;
- supportsClassB: boolean;
- supportsClassC: boolean;
- isRelay: boolean;
- isRelayEd: boolean,
- payloadCodecRuntime: CodecRuntime;
- adrAlgorithms: [string, string][];
- regionConfigurations: RegionListItem[];
- regionConfigurationsFiltered: [string, string][];
- templateModalVisible: boolean;
- tabActive: string;
-}
+function DeviceProfileForm(props: IProps) {
+ const [form] = Form.useForm();
-class DeviceProfileForm extends Component {
- formRef = React.createRef();
+ const [supportsOtaa, setSupportsOtaa] = useState(false);
+ const [supportsClassB, setSupportsClassB] = useState(false);
+ const [supportsClassC, setSupportsClassC] = useState(false);
+ const [isRelay, setIsRelay] = useState(false);
+ const [isRelayEd, setIsRelayEd] = useState(false);
+ const [payloadCodecRuntime, setPayloadCodecRuntime] = useState(CodecRuntime.NONE);
+ const [adrAlgorithms, setAdrAlgorithms] = useState<[string, string][]>([]);
+ const [regionConfigurations, setRegionConfigurations] = useState([]);
+ const [regionConfigurationsFiltered, setRegionConfigurationsFiltered] = useState<[string, string][]>([]);
+ const [templateModalVisible, setTemplateModalVisible] = useState(false);
+ const [tabActive, setTabActive] = useState("1");
- constructor(props: IProps) {
- super(props);
- this.state = {
- supportsOtaa: false,
- supportsClassB: false,
- supportsClassC: false,
- isRelay: false,
- isRelayEd: false,
- payloadCodecRuntime: CodecRuntime.NONE,
- adrAlgorithms: [],
- regionConfigurations: [],
- regionConfigurationsFiltered: [],
- templateModalVisible: false,
- tabActive: "1",
- };
- }
-
- componentDidMount() {
- const v = this.props.initialValues;
-
- this.setState({
- supportsOtaa: v.getSupportsOtaa(),
- supportsClassB: v.getSupportsClassB(),
- supportsClassC: v.getSupportsClassC(),
- payloadCodecRuntime: v.getPayloadCodecRuntime(),
- isRelay: v.getIsRelay(),
- isRelayEd: v.getIsRelayEd(),
- });
+ useEffect(() => {
+ const v = props.initialValues;
+ setSupportsOtaa(v.getSupportsOtaa());
+ setSupportsClassB(v.getSupportsClassB());
+ setSupportsClassC(v.getSupportsClassC());
+ setPayloadCodecRuntime(v.getPayloadCodecRuntime());
+ setIsRelay(v.getIsRelay());
+ setIsRelayEd(v.getIsRelayEd());
InternalStore.listRegions((resp: ListRegionsResponse) => {
- this.setState(
- {
- regionConfigurations: resp.getRegionsList(),
- },
- () => {
- let regionConfigurationsFiltered: [string, string][] = [];
- for (const r of this.state.regionConfigurations) {
- if (v.getRegion() === r.getRegion()) {
- regionConfigurationsFiltered.push([r.getId(), r.getDescription()]);
- }
- }
- this.setState({
- regionConfigurationsFiltered: regionConfigurationsFiltered,
- });
- },
- );
+ setRegionConfigurations(resp.getRegionsList());
+
+ let regionConfigurationsFiltered: [string, string][] = [];
+ for (const r of resp.getRegionsList()) {
+ if (v.getRegion() === r.getRegion()) {
+ regionConfigurationsFiltered.push([r.getId(), r.getDescription()]);
+ }
+ }
+
+ setRegionConfigurationsFiltered(regionConfigurationsFiltered);
});
DeviceProfileStore.listAdrAlgorithms((resp: ListDeviceProfileAdrAlgorithmsResponse) => {
@@ -266,20 +216,16 @@ class DeviceProfileForm extends Component {
adrAlgorithms.push([a.getId(), a.getName()]);
}
- this.setState({
- adrAlgorithms: adrAlgorithms,
- });
+ setAdrAlgorithms(adrAlgorithms);
});
- }
+ }, [props]);
- onTabChange = (activeKey: string) => {
- this.setState({
- tabActive: activeKey,
- });
+ const onTabChange = (activeKey: string) => {
+ setTabActive(activeKey);
};
- onFinish = (values: DeviceProfile.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: DeviceProfile.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let dp = new DeviceProfile();
dp.setId(v.id);
@@ -356,57 +302,41 @@ class DeviceProfileForm extends Component {
}
dp.setAutoDetectMeasurements(v.autoDetectMeasurements);
- this.props.onFinish(dp);
+ props.onFinish(dp);
};
- onSupportsOtaaChange = (checked: boolean) => {
- this.setState({
- supportsOtaa: checked,
- });
+ const onSupportsOtaaChange = (checked: boolean) => {
+ setSupportsOtaa(checked);
};
- onSupportsClassBChnage = (checked: boolean) => {
- this.setState({
- supportsClassB: checked,
- });
+ const onSupportsClassBChnage = (checked: boolean) => {
+ setSupportsClassB(checked);
};
- onSupportsClassCChange = (checked: boolean) => {
- this.setState({
- supportsClassC: checked,
- });
+ const onSupportsClassCChange = (checked: boolean) => {
+ setSupportsClassC(checked);
};
- onPayloadCodecRuntimeChange = (value: CodecRuntime) => {
- this.setState({
- payloadCodecRuntime: value,
- });
+ const onPayloadCodecRuntimeChange = (value: CodecRuntime) => {
+ setPayloadCodecRuntime(value);
};
- onIsRelayChange = (checked: boolean) => {
- this.setState({
- isRelay: checked,
- });
- }
-
- onIsRelayEdChange = (checked: boolean) => {
- this.setState({
- isRelayEd: checked,
- });
- }
-
- showTemplateModal = () => {
- this.setState({
- templateModalVisible: true,
- });
+ const onIsRelayChange = (checked: boolean) => {
+ setIsRelay(checked);
};
- onTemplateModalOk = (dp: DeviceProfileTemplate) => {
- this.setState({
- templateModalVisible: false,
- });
+ const onIsRelayEdChange = (checked: boolean) => {
+ setIsRelayEd(checked);
+ };
- this.formRef.current.setFieldsValue({
+ const showTemplateModal = () => {
+ setTemplateModalVisible(true);
+ };
+
+ const onTemplateModalOk = (dp: DeviceProfileTemplate) => {
+ setTemplateModalVisible(false);
+
+ form.setFieldsValue({
name: dp.getName(),
description: dp.getDescription(),
region: dp.getRegion(),
@@ -434,833 +364,794 @@ class DeviceProfileForm extends Component {
measurementsMap: dp.toObject().measurementsMap,
});
- const tabActive = this.state.tabActive;
-
- this.setState(
- {
- supportsOtaa: dp.getSupportsOtaa(),
- supportsClassB: dp.getSupportsClassB(),
- supportsClassC: dp.getSupportsClassC(),
- payloadCodecRuntime: dp.getPayloadCodecRuntime(),
- },
- () => {
- // This is a workaround as without rendering the TabPane (e.g. the user
- // does not click through the different tabs), setFieldsValue does not
- // actually update the fields. For example if selecting a template with
- // a codec script and immediately click the save button, no codec script
- // is passed to the onFinish function. This seems to be with every field
- // that is not actually rendered before clicking the Save button.
- this.setState(
- {
- tabActive: "1",
- },
- () => {
- this.setState(
- {
- tabActive: "2",
- },
- () => {
- this.setState(
- {
- tabActive: "3",
- },
- () => {
- this.setState(
- {
- tabActive: "4",
- },
- () => {
- this.setState(
- {
- tabActive: "5",
- },
- () => {
- this.setState(
- {
- tabActive: "6",
- },
- () => {
- this.setState(
- {
- tabActive: "7",
- },
- () => {
- this.setState(
- {
- tabActive: "8",
- },
- () => {
- this.setState({
- tabActive: tabActive,
- });
- },
- );
- },
- );
- },
- );
- },
- );
- },
- );
- },
- );
- },
- );
- },
- );
- },
- );
+ setSupportsOtaa(dp.getSupportsOtaa());
+ setSupportsClassB(dp.getSupportsClassB());
+ setSupportsClassC(dp.getSupportsClassC());
+ setPayloadCodecRuntime(dp.getPayloadCodecRuntime());
};
- onTemplateModalCancel = () => {
- this.setState({
- templateModalVisible: false,
- });
+ const onTemplateModalCancel = () => {
+ setTemplateModalVisible(false);
};
- onRegionChange = (region: Region) => {
+ const onRegionChange = (region: Region) => {
let regionConfigurationsFiltered: [string, string][] = [];
- for (const r of this.state.regionConfigurations) {
+ for (const r of regionConfigurations) {
if (region === r.getRegion()) {
regionConfigurationsFiltered.push([r.getId(), r.getDescription()]);
}
}
- this.setState({
- regionConfigurationsFiltered: regionConfigurationsFiltered,
- });
- this.formRef.current.setFieldsValue({
+
+ setRegionConfigurationsFiltered(regionConfigurationsFiltered);
+ form.setFieldsValue({
regionConfigId: "",
});
};
- render() {
- const adrOptions = this.state.adrAlgorithms.map(v => {v[1]});
- const regionConfigOptions = this.state.regionConfigurationsFiltered.map(v => (
- {v[1]}
- ));
- const regionOptions = this.state.regionConfigurations
- .map(v => v.getRegion())
- .filter((v, i, a) => a.indexOf(v) === i)
- .map(v => {getEnumName(Region, v).replace("_", "-")});
- const operations = (
-
- );
+ const adrOptions = adrAlgorithms.map(v => {v[1]});
+ const regionConfigOptions = regionConfigurationsFiltered.map(v => {v[1]});
+ const regionOptions = regionConfigurations
+ .map(v => v.getRegion())
+ .filter((v, i, a) => a.indexOf(v) === i)
+ .map(v => {getEnumName(Region, v).replace("_", "-")});
+ const operations = (
+
+ );
- return (
-
- );
- }
+
+
+
+
+
+
+
+ );
}
export default DeviceProfileForm;
diff --git a/ui/src/views/device-profiles/EditDeviceProfile.tsx b/ui/src/views/device-profiles/EditDeviceProfile.tsx
index aee367c0..35c0d3d0 100644
--- a/ui/src/views/device-profiles/EditDeviceProfile.tsx
+++ b/ui/src/views/device-profiles/EditDeviceProfile.tsx
@@ -1,7 +1,8 @@
-import React, { Component } from "react";
-import { RouteComponentProps, Link } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate, Link, useParams } from "react-router-dom";
-import { Space, Breadcrumb, Card, Button, PageHeader } from "antd";
+import { Space, Breadcrumb, Card, Button } from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
import {
@@ -18,112 +19,95 @@ import SessionStore from "../../stores/SessionStore";
import DeleteConfirm from "../../components/DeleteConfirm";
import Admin from "../../components/Admin";
-interface IState {
- deviceProfile?: DeviceProfile;
-}
-
-interface MatchParams {
- deviceProfileId: string;
-}
-
-interface IProps extends RouteComponentProps {
+interface IProps {
tenant: Tenant;
}
-class EditDeviceProfile extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {};
- }
+function EditDeviceProfile(props: IProps) {
+ const navigate = useNavigate();
+ const [deviceProfile, setDeviceProfile] = useState(undefined);
+ const { deviceProfileId } = useParams();
- componentDidMount() {
- this.getDeviceProfile();
- }
-
- getDeviceProfile = () => {
- const id = this.props.match.params.deviceProfileId;
+ useEffect(() => {
+ const id = deviceProfileId!;
let req = new GetDeviceProfileRequest();
req.setId(id);
DeviceProfileStore.get(req, (resp: GetDeviceProfileResponse) => {
- this.setState({
- deviceProfile: resp.getDeviceProfile(),
- });
+ setDeviceProfile(resp.getDeviceProfile());
});
- };
+ }, [deviceProfileId]);
- onFinish = (obj: DeviceProfile) => {
+ const onFinish = (obj: DeviceProfile) => {
let req = new UpdateDeviceProfileRequest();
req.setDeviceProfile(obj);
DeviceProfileStore.update(req, () => {
- this.props.history.push(`/tenants/${this.props.tenant.getId()}/device-profiles`);
+ navigate(`/tenants/${props.tenant.getId()}/device-profiles`);
});
};
- deleteDeviceProfile = () => {
+ const deleteDeviceProfile = () => {
let req = new DeleteDeviceProfileRequest();
- req.setId(this.props.match.params.deviceProfileId);
+ req.setId(deviceProfileId!);
DeviceProfileStore.delete(req, () => {
- this.props.history.push(`/tenants/${this.props.tenant.getId()}/device-profiles`);
+ navigate(`/tenants/${props.tenant.getId()}/device-profiles`);
});
};
- render() {
- const dp = this.state.deviceProfile;
+ const dp = deviceProfile;
- if (!dp) {
- return null;
- }
-
- const disabled = !(
- SessionStore.isAdmin() ||
- SessionStore.isTenantAdmin(this.props.tenant.getId()) ||
- SessionStore.isTenantDeviceAdmin(this.props.tenant.getId())
- );
-
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
-
- Device profiles
-
-
-
- {dp.getName()}
-
-
- )}
- title={dp.getName()}
- subTitle={`device profile id: ${dp.getId()}`}
- extra={[
-
-
-
-
- ,
- ]}
- />
-
-
-
-
- );
+ if (!dp) {
+ return null;
}
+
+ const disabled = !(
+ SessionStore.isAdmin() ||
+ SessionStore.isTenantAdmin(props.tenant.getId()) ||
+ SessionStore.isTenantDeviceAdmin(props.tenant.getId())
+ );
+
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+
+ Device profiles
+
+
+
+ {dp.getName()}
+
+
+ )}
+ title={dp.getName()}
+ subTitle={`device profile id: ${dp.getId()}`}
+ extra={[
+
+
+
+
+ ,
+ ]}
+ />
+
+
+
+
+ );
}
export default EditDeviceProfile;
diff --git a/ui/src/views/device-profiles/ListDeviceProfiles.tsx b/ui/src/views/device-profiles/ListDeviceProfiles.tsx
index 5ada24e1..ef54ffd4 100644
--- a/ui/src/views/device-profiles/ListDeviceProfiles.tsx
+++ b/ui/src/views/device-profiles/ListDeviceProfiles.tsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
import { Link } from "react-router-dom";
-import { Space, Breadcrumb, Button, PageHeader } from "antd";
+import { Space, Breadcrumb, Button } from "antd";
import { ColumnsType } from "antd/es/table";
+import { PageHeader } from "@ant-design/pro-layout";
import {
ListDeviceProfilesRequest,
@@ -21,89 +21,87 @@ interface IProps {
tenant: Tenant;
}
-class ListDeviceProfiles extends Component {
- columns = (): ColumnsType => {
- return [
- {
- title: "Name",
- dataIndex: "name",
- key: "name",
- render: (text, record) => (
- {text}
- ),
+function ListDeviceProfiles(props: IProps) {
+ const columns: ColumnsType = [
+ {
+ title: "Name",
+ dataIndex: "name",
+ key: "name",
+ render: (text, record) => (
+ {text}
+ ),
+ },
+ {
+ title: "Region",
+ dataIndex: "region",
+ key: "region",
+ width: 150,
+ render: (text, record) => {
+ return getEnumName(Region, record.region);
},
- {
- title: "Region",
- dataIndex: "region",
- key: "region",
- width: 150,
- render: (text, record) => {
- return getEnumName(Region, record.region);
- },
+ },
+ {
+ title: "MAC version",
+ dataIndex: "macVersion",
+ key: "macVersion",
+ width: 150,
+ render: (text, record) => {
+ return formatMacVersion(record.macVersion);
},
- {
- title: "MAC version",
- dataIndex: "macVersion",
- key: "macVersion",
- width: 150,
- render: (text, record) => {
- return formatMacVersion(record.macVersion);
- },
+ },
+ {
+ title: "Revision",
+ dataIndex: "regParamsRevision",
+ key: "regParamsRevision",
+ width: 150,
+ render: (text, record) => {
+ return formatRegParamsRevision(record.regParamsRevision);
},
- {
- title: "Revision",
- dataIndex: "regParamsRevision",
- key: "regParamsRevision",
- width: 150,
- render: (text, record) => {
- return formatRegParamsRevision(record.regParamsRevision);
- },
+ },
+ {
+ title: "Supports OTAA",
+ dataIndex: "supportsOtaa",
+ key: "supportsOtaa",
+ width: 150,
+ render: (text, record) => {
+ if (record.supportsOtaa) {
+ return "yes";
+ } else {
+ return "no";
+ }
},
- {
- title: "Supports OTAA",
- dataIndex: "supportsOtaa",
- key: "supportsOtaa",
- width: 150,
- render: (text, record) => {
- if (record.supportsOtaa) {
- return "yes";
- } else {
- return "no";
- }
- },
+ },
+ {
+ title: "Supports Class-B",
+ dataIndex: "supportsClassB",
+ key: "supportsClassB",
+ width: 150,
+ render: (text, record) => {
+ if (record.supportsClassB) {
+ return "yes";
+ } else {
+ return "no";
+ }
},
- {
- title: "Supports Class-B",
- dataIndex: "supportsClassB",
- key: "supportsClassB",
- width: 150,
- render: (text, record) => {
- if (record.supportsClassB) {
- return "yes";
- } else {
- return "no";
- }
- },
+ },
+ {
+ title: "Supports Class-C",
+ dataIndex: "supportsClassC",
+ key: "supportsClassC",
+ width: 150,
+ render: (text, record) => {
+ if (record.supportsClassC) {
+ return "yes";
+ } else {
+ return "no";
+ }
},
- {
- title: "Supports Class-C",
- dataIndex: "supportsClassC",
- key: "supportsClassC",
- width: 150,
- render: (text, record) => {
- if (record.supportsClassC) {
- return "yes";
- } else {
- return "no";
- }
- },
- },
- ];
- };
+ },
+ ];
- getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
+ const getPage = (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => {
let req = new ListDeviceProfilesRequest();
- req.setTenantId(this.props.tenant.getId());
+ req.setTenantId(props.tenant.getId());
req.setLimit(limit);
req.setOffset(offset);
@@ -113,38 +111,36 @@ class ListDeviceProfiles extends Component {
});
};
- render() {
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
- Device profiles
-
-
- )}
- title="Device profiles"
- extra={[
-
-
- ,
- ]}
- />
-
-
- );
- }
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+ Device profiles
+
+
+ )}
+ title="Device profiles"
+ extra={[
+
+
+ ,
+ ]}
+ />
+
+
+ );
}
export default ListDeviceProfiles;
diff --git a/ui/src/views/devices/CreateDevice.tsx b/ui/src/views/devices/CreateDevice.tsx
index 46db75bb..8cee9d60 100644
--- a/ui/src/views/devices/CreateDevice.tsx
+++ b/ui/src/views/devices/CreateDevice.tsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import { Link, RouteComponentProps } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
-import { Space, Breadcrumb, Card, PageHeader } from "antd";
+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 } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
@@ -15,14 +15,16 @@ import DeviceForm from "./DeviceForm";
import DeviceStore from "../../stores/DeviceStore";
import DeviceProfileStore from "../../stores/DeviceProfileStore";
-interface IProps extends RouteComponentProps {
+interface IProps {
tenant: Tenant;
application: Application;
}
-class CreateDevice extends Component {
- onFinish = (obj: Device) => {
- obj.setApplicationId(this.props.application.getId());
+function CreateDevice(props: IProps) {
+ const navigate = useNavigate();
+
+ const onFinish = (obj: Device) => {
+ obj.setApplicationId(props.application.getId());
let req = new CreateDeviceRequest();
req.setDevice(obj);
@@ -34,60 +36,58 @@ class CreateDevice extends Component {
DeviceProfileStore.get(req, (resp: GetDeviceProfileResponse) => {
let dp = resp.getDeviceProfile()!;
if (dp.getSupportsOtaa()) {
- this.props.history.push(
- `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}/keys`,
+ navigate(
+ `/tenants/${props.tenant.getId()}/applications/${props.application.getId()}/devices/${obj.getDevEui()}/keys`,
);
} else {
- this.props.history.push(
- `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${obj.getDevEui()}`,
+ navigate(
+ `/tenants/${props.tenant.getId()}/applications/${props.application.getId()}/devices/${obj.getDevEui()}`,
);
}
});
});
};
- render() {
- let device = new Device();
- device.setApplicationId(this.props.application.getId());
+ let device = new Device();
+ device.setApplicationId(props.application.getId());
- return (
-
- (
-
-
- Tenants
-
-
-
- {this.props.tenant.getName()}
-
-
-
-
- Applications
-
-
-
-
-
- {this.props.application.getName()}
-
-
-
-
- Add device
-
-
- )}
- title="Add device"
- />
-
-
-
-
- );
- }
+ return (
+
+ (
+
+
+ Tenants
+
+
+
+ {props.tenant.getName()}
+
+
+
+
+ Applications
+
+
+
+
+
+ {props.application.getName()}
+
+
+
+
+ Add device
+
+
+ )}
+ title="Add device"
+ />
+
+
+
+
+ );
}
export default CreateDevice;
diff --git a/ui/src/views/devices/DeviceActivation.tsx b/ui/src/views/devices/DeviceActivation.tsx
index 52b9ef13..b1ac4a67 100644
--- a/ui/src/views/devices/DeviceActivation.tsx
+++ b/ui/src/views/devices/DeviceActivation.tsx
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { RouteComponentProps } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
import { Space, Form, Button, Row, Col, InputNumber, Alert } from "antd";
@@ -26,11 +26,11 @@ interface FormProps {
onFinish: (obj: DeviceActivationPb) => void;
}
-class LW10DeviceActivationForm extends Component {
- formRef = React.createRef();
+function LW10DeviceActivationForm(props: FormProps) {
+ const [form] = Form.useForm();
- onFinish = (values: DeviceActivationPb.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: DeviceActivationPb.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let da = new DeviceActivationPb();
da.setDevAddr(v.devAddr);
@@ -42,66 +42,56 @@ class LW10DeviceActivationForm extends Component {
da.setAFCntDown(v.nFCntDown);
da.setNFCntDown(v.nFCntDown);
- this.props.onFinish(da);
+ props.onFinish(da);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
-class LW11DeviceActivationForm extends Component {
- formRef = React.createRef();
+function LW11DeviceActivationForm(props: FormProps) {
+ const [form] = Form.useForm();
- onFinish = (values: DeviceActivationPb.AsObject) => {
- const v = Object.assign(this.props.initialValues.toObject(), values);
+ const onFinish = (values: DeviceActivationPb.AsObject) => {
+ const v = Object.assign(props.initialValues.toObject(), values);
let da = new DeviceActivationPb();
da.setDevAddr(v.devAddr);
@@ -113,162 +103,133 @@ class LW11DeviceActivationForm extends Component {
da.setAFCntDown(v.aFCntDown);
da.setNFCntDown(v.nFCntDown);
- this.props.onFinish(da);
+ props.onFinish(da);
};
- render() {
- return (
-
- );
- }
+ return (
+
+ );
}
-interface IProps extends RouteComponentProps {
+interface IProps {
tenant: Tenant;
application: Application;
device: Device;
deviceProfile: DeviceProfile;
}
-interface IState {
- deviceActivation?: DeviceActivationPb;
- deviceActivationRequested: boolean;
-}
+function DeviceActivation(props: IProps) {
+ const navigate = useNavigate();
+ const [deviceActivation, setDeviceActivation] = useState(undefined);
+ const [deviceActivationRequested, setDeviceActivationRequested] = useState(false);
-class DeviceActivation extends Component {
- constructor(props: IProps) {
- super(props);
- this.state = {
- deviceActivationRequested: false,
- };
- }
-
- componentDidMount() {
+ useEffect(() => {
let req = new GetDeviceActivationRequest();
- req.setDevEui(this.props.device.getDevEui());
+ req.setDevEui(props.device.getDevEui());
DeviceStore.getActivation(req, (resp: GetDeviceActivationResponse) => {
- this.setState({
- deviceActivation: resp.getDeviceActivation(),
- deviceActivationRequested: true,
- });
+ setDeviceActivation(resp.getDeviceActivation());
+ setDeviceActivationRequested(true);
});
- }
+ }, [props]);
- onFinish = (obj: DeviceActivationPb) => {
+ const onFinish = (obj: DeviceActivationPb) => {
let req = new ActivateDeviceRequest();
- obj.setDevEui(this.props.device.getDevEui());
+ obj.setDevEui(props.device.getDevEui());
req.setDeviceActivation(obj);
DeviceStore.activate(req, () => {
- this.props.history.push(
- `/tenants/${this.props.tenant.getId()}/applications/${this.props.application.getId()}/devices/${this.props.device.getDevEui()}`,
+ navigate(
+ `/tenants/${props.tenant.getId()}/applications/${props.application.getId()}/devices/${props.device.getDevEui()}`,
);
});
};
- render() {
- if (!this.state.deviceActivationRequested) {
- return null;
- }
-
- if (!this.state.deviceActivation && this.props.deviceProfile.getSupportsOtaa()) {
- return ;
- }
-
- let macVersion = this.props.deviceProfile.getMacVersion();
- const lw11 = macVersion === MacVersion.LORAWAN_1_1_0;
-
- let initialValues = new DeviceActivationPb();
- if (this.state.deviceActivation) {
- initialValues = this.state.deviceActivation;
- }
-
- return (
-
- {!lw11 && (
-
- )}
- {lw11 && (
-
- )}
-
- );
+ if (!deviceActivationRequested) {
+ return null;
}
+
+ if (!deviceActivation && props.deviceProfile.getSupportsOtaa()) {
+ return ;
+ }
+
+ let macVersion = props.deviceProfile.getMacVersion();
+ const lw11 = macVersion === MacVersion.LORAWAN_1_1_0;
+
+ let initialValues = new DeviceActivationPb();
+ if (deviceActivation) {
+ initialValues = deviceActivation;
+ }
+
+ return (
+
+ {!lw11 && (
+
+ )}
+ {lw11 && (
+
+ )}
+
+ );
}
export default DeviceActivation;
diff --git a/ui/src/views/devices/DeviceDashboard.tsx b/ui/src/views/devices/DeviceDashboard.tsx
index 58571644..c4bc0075 100644
--- a/ui/src/views/devices/DeviceDashboard.tsx
+++ b/ui/src/views/devices/DeviceDashboard.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import moment from "moment";
@@ -27,31 +27,18 @@ interface IProps {
lastSeenAt?: Date;
}
-interface IState {
- metricsAggregation: Aggregation;
- deviceMetrics?: GetDeviceMetricsResponse;
- deviceLinkMetrics?: GetDeviceLinkMetricsResponse;
- deviceMetricsLoaded: boolean;
- deviceLinkMetricsLoaded: boolean;
-}
+function DeviceDashboard(props: IProps) {
+ const [metricsAggregation, setMetricsAggregation] = useState(Aggregation.DAY);
+ const [deviceMetrics, setDeviceMetrics] = useState(undefined);
+ const [deviceLinkMetrics, setDeviceLinkMetrics] = useState(undefined);
+ const [deviceLinkMetricsLoaded, setDeviceLinkMetricsLoaded] = useState(false);
-class DeviceDashboard extends Component {
- constructor(props: IProps) {
- super(props);
+ useEffect(() => {
+ loadMetrics();
+ }, [props, metricsAggregation]);
- this.state = {
- metricsAggregation: Aggregation.DAY,
- deviceMetricsLoaded: false,
- deviceLinkMetricsLoaded: false,
- };
- }
-
- componentDidMount() {
- this.loadMetrics();
- }
-
- loadMetrics = () => {
- const agg = this.state.metricsAggregation;
+ const loadMetrics = () => {
+ const agg = metricsAggregation;
const end = moment();
let start = moment();
@@ -63,19 +50,12 @@ class DeviceDashboard extends Component {
start = start.subtract(12, "months");
}
- this.setState(
- {
- deviceMetricsLoaded: false,
- deviceLinkMetricsLoaded: false,
- },
- () => {
- this.loadLinkMetrics(start.toDate(), end.toDate(), agg);
- this.loadDeviceMetrics(start.toDate(), end.toDate(), agg);
- },
- );
+ setDeviceLinkMetricsLoaded(false);
+ loadLinkMetrics(start.toDate(), end.toDate(), agg);
+ loadDeviceMetrics(start.toDate(), end.toDate(), agg);
};
- loadDeviceMetrics = (start: Date, end: Date, agg: Aggregation) => {
+ const loadDeviceMetrics = (start: Date, end: Date, agg: Aggregation) => {
let startPb = new Timestamp();
let endPb = new Timestamp();
@@ -83,20 +63,17 @@ class DeviceDashboard extends Component {
endPb.fromDate(end);
let req = new GetDeviceMetricsRequest();
- req.setDevEui(this.props.device.getDevEui());
+ req.setDevEui(props.device.getDevEui());
req.setStart(startPb);
req.setEnd(endPb);
req.setAggregation(agg);
DeviceStore.getMetrics(req, (resp: GetDeviceMetricsResponse) => {
- this.setState({
- deviceMetrics: resp,
- deviceMetricsLoaded: true,
- });
+ setDeviceMetrics(resp);
});
};
- loadLinkMetrics = (start: Date, end: Date, agg: Aggregation) => {
+ const loadLinkMetrics = (start: Date, end: Date, agg: Aggregation) => {
let startPb = new Timestamp();
let endPb = new Timestamp();
@@ -104,176 +81,153 @@ class DeviceDashboard extends Component