ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2024-12-19 21:27:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: Replace moment with date-fns. (#460)

Browse Source
This commit is contained in:
Bernd Storath 2024-07-22 11:16:08 +02:00 committed by GitHub
parent 262f51da3f
commit 2a8e49bf8d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/package.json
View File

@ -21,16 +21,16 @@
"antd": "^5.19.1",
"buffer": "^6.0.3",
"chart.js": "^4.4.3",
"chartjs-adapter-moment": "^1.0.1",
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-chart-matrix": "^2.0.1",
"codemirror": "^5.65.16",
"events": "^3.3.0",
"date-fns": "^3.6.0",
"google-palette": "^1.1.1",
"history": "^5.3.0",
"js-file-download": "^0.4.12",
"leaflet": "^1.9.4",
"leaflet.awesome-markers": "^2.0.5",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-chartjs-2": "^5.2.0",
"react-codemirror2": "^8.0.0",

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

@ -1,6 +1,6 @@
import { useState } from "react";
import moment from "moment";
import { format } from "date-fns";
import { JSONTree as JSONTreeOriginal } from "react-json-tree";
import fileDownload from "js-file-download";
@ -25,7 +25,7 @@ function LogTable(props: IProps) {
const onDrawerOpen = (time: { seconds: number } | undefined, body: string) => {
const ts = new Date(0);
ts.setUTCSeconds(time!.seconds);
const drawerTitle = moment(ts).format("YYYY-MM-DD HH:mm:ss");
const drawerTitle = format(ts, "YYYY-MM-DD HH:mm:ss");
return () => {
setBody(body);
@ -106,7 +106,7 @@ function LogTable(props: IProps) {
render: (text, obj) => {
const ts = new Date(0);
ts.setUTCSeconds(obj.time!.seconds);
return moment(ts).format("YYYY-MM-DD HH:mm:ss");
return format(ts, "YYYY-MM-DD HH:mm:ss");
},
},
{

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

@ -2,7 +2,6 @@ import { Card } from "antd";
import type { TimeUnit } from "chart.js";
import { Bar } from "react-chartjs-2";
import moment from "moment";
import palette from "google-palette";
import type { Metric } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
@ -52,7 +51,7 @@ function MetricBar(props: IProps) {
backgroundColor: string;
}[];
} = {
labels: props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
labels: props.metric.getTimestampsList().map(v => v.toDate().getTime()),
datasets: [],
};

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

@ -2,7 +2,6 @@ import { Card } from "antd";
import type { TimeUnit } from "chart.js";
import { Line } from "react-chartjs-2";
import moment from "moment";
import palette from "google-palette";
import type { Metric } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
@ -54,7 +53,7 @@ function MetricChart(props: IProps) {
let prevValue = 0;
const data = {
labels: props.metric.getTimestampsList().map(v => moment(v.toDate()).valueOf()),
labels: props.metric.getTimestampsList().map(v => v.toDate().getTime()),
datasets: props.metric
.getDatasetsList()
.sort((a, b) => a.getLabel().localeCompare(b.getLabel()))

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

@ -5,7 +5,6 @@ import { Card } from "antd";
import { color } from "chart.js/helpers";
import type { TimeUnit } from "chart.js";
import { Chart } from "react-chartjs-2";
import moment from "moment";
import type { Metric } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import { Aggregation } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
@ -44,7 +43,7 @@ function MetricHeatmap(props: IProps) {
unit: unit,
},
offset: true,
labels: props.metric.getTimestampsList().map(v => moment(v.toDate().valueOf())),
labels: props.metric.getTimestampsList().map(v => v.toDate().getTime()),
grid: {
display: false,
},
@ -127,7 +126,7 @@ function MetricHeatmap(props: IProps) {
}
data.datasets[0].data.push({
x: moment(tsList[i].toDate()).valueOf(),
x: tsList[i].toDate().getTime(),
y: ds.getLabel(),
v: v,
});

2
ui/src/index.tsx
View File

@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
import { Chart, registerables } from "chart.js";
import { MatrixElement, MatrixController } from "chartjs-chart-matrix";
import "chartjs-adapter-moment";
import "chartjs-adapter-date-fns";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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

@ -1,6 +1,6 @@
import { useState } from "react";
import moment from "moment";
import { format } from "date-fns";
import { Card, Button, Form, Input } from "antd";
import type {
@ -59,7 +59,7 @@ function GenerateMqttCertificate(props: IProps) {
const cert = certificate!;
const initial = {
expiresAt: moment(cert.getExpiresAt()!.toDate()!).format("YYYY-MM-DD HH:mm:ss"),
expiresAt: format(cert.getExpiresAt()!.toDate()!, "YYYY-MM-DD HH:mm:ss"),
caCert: cert.getCaCert(),
tlsCert: cert.getTlsCert(),
tlsKey: cert.getTlsKey(),

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

@ -5,7 +5,7 @@ import { presetPalettes } from "@ant-design/colors";
import { Space, Breadcrumb, Card, Row, Col, Empty } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import moment from "moment";
import { formatDistanceToNow } from "date-fns";
import type { LatLngTuple, PointTuple } from "leaflet";
import { Popup } from "react-leaflet";
import { Doughnut } from "react-chartjs-2";
@ -65,8 +65,7 @@ function GatewaysMap() {
}
if (item.getLastSeenAt() !== undefined) {
const ts = moment(item.getLastSeenAt()!.toDate());
lastSeen = ts.fromNow();
lastSeen = formatDistanceToNow(item.getLastSeenAt()!.toDate(), { addSuffix: true });
}
markers.push(

18
ui/src/views/devices/DeviceDashboard.tsx
View File

@ -1,7 +1,7 @@
import { useState, useEffect, useCallback } from "react";
import { Link } from "react-router-dom";
import moment from "moment";
import { format, sub } from "date-fns";
import { ReloadOutlined } from "@ant-design/icons";
import type { RadioChangeEvent } from "antd";
import { Descriptions, Space, Card, Statistic, Row, Col, Tabs, Radio, Button, Spin } from "antd";
@ -81,20 +81,20 @@ function DeviceDashboard(props: IProps) {
const loadMetrics = useCallback(() => {
const agg = metricsAggregation;
const end = moment();
let start = moment();
const end = new Date();
let start = new Date();
if (agg === Aggregation.DAY) {
start = start.subtract(30, "days");
start = sub(start, { days: 30 });
} else if (agg === Aggregation.HOUR) {
start = start.subtract(24, "hours");
start = sub(start, { hours: 24 });
} else if (agg === Aggregation.MONTH) {
start = start.subtract(12, "months");
start = sub(start, { months: 12 });
}
setDeviceLinkMetricsLoaded(false);
loadLinkMetrics(start.toDate(), end.toDate(), agg);
loadDeviceMetrics(start.toDate(), end.toDate(), agg);
loadLinkMetrics(start, end, agg);
loadDeviceMetrics(start, end, agg);
}, [loadLinkMetrics, loadDeviceMetrics, metricsAggregation]);
useEffect(() => {
@ -153,7 +153,7 @@ function DeviceDashboard(props: IProps) {
let lastSeenAt = "Never";
if (props.lastSeenAt !== undefined) {
lastSeenAt = moment(props.lastSeenAt).format("YYYY-MM-DD HH:mm:ss");
lastSeenAt = format(props.lastSeenAt, "YYYY-MM-DD HH:mm:ss");
}
const loading = !deviceLinkMetricsLoaded || !deviceMetrics;

4
ui/src/views/devices/ListDevices.tsx
View File

@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import moment from "moment";
import { format } from "date-fns";
import { Space, Button, Dropdown, Menu, Modal, Select } from "antd";
import type { ColumnsType } from "antd/es/table";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -75,7 +75,7 @@ function ListDevices(props: IProps) {
if (record.lastSeenAt !== undefined) {
const ts = new Date(0);
ts.setUTCSeconds(record.lastSeenAt.seconds);
return moment(ts).format("YYYY-MM-DD HH:mm:ss");
return format(ts, "YYYY-MM-DD HH:mm:ss");
}
return "Never";
},

4
ui/src/views/gateways/GatewayCertificate.tsx
View File

@ -1,6 +1,6 @@
import { useState } from "react";
import moment from "moment";
import { format } from "date-fns";
import { Card, Button, Form, Input } from "antd";
import type {
@ -55,7 +55,7 @@ function GatewayCertificate(props: IProps) {
const cert = certificate!;
const initial = {
expiresAt: moment(cert.getExpiresAt()!.toDate()!).format("YYYY-MM-DD HH:mm:ss"),
expiresAt: format(cert.getExpiresAt()!.toDate()!, "YYYY-MM-DD HH:mm:ss"),
caCert: cert.getCaCert(),
tlsCert: cert.getTlsCert(),
tlsKey: cert.getTlsKey(),

26
ui/src/views/gateways/GatewayDashboard.tsx
View File

@ -1,6 +1,6 @@
import { useState, useEffect } from "react";
import moment from "moment";
import { format, sub } from "date-fns";
import { Descriptions, Space, Card, Row, Col } from "antd";
import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb";
@ -35,22 +35,22 @@ function GatewayDashboard(props: IProps) {
useEffect(() => {
const agg = metricsAggregation;
const end = moment();
let start = moment();
const end = new Date();
let start = new Date();
if (agg === Aggregation.DAY) {
start = start.subtract(30, "days");
start = sub(start, { days: 30 });
} else if (agg === Aggregation.HOUR) {
start = start.subtract(24, "hours");
start = sub(start, { hours: 24 });
} else if (agg === Aggregation.MONTH) {
start = start.subtract(12, "months");
start = sub(start, { months: 12 });
}
const startPb = new Timestamp();
const endPb = new Timestamp();
startPb.fromDate(start.toDate());
endPb.fromDate(end.toDate());
startPb.fromDate(start);
endPb.fromDate(end);
const req = new GetGatewayMetricsRequest();
req.setGatewayId(props.gateway.getGatewayId());
@ -62,13 +62,13 @@ function GatewayDashboard(props: IProps) {
setGatewayMetrics(resp);
});
const dcEnd = moment().subtract(1, "minute");
const dcEnd = sub(new Date(), { minutes: 1 });
const dcEndPb = new Timestamp();
dcEndPb.fromDate(dcEnd.toDate());
dcEndPb.fromDate(dcEnd);
const dcStart = dcEnd.subtract(1, "hours");
const dcStart = sub(dcEnd, { hours: 1 });
const dcStartPb = new Timestamp();
dcStartPb.fromDate(dcStart.toDate());
dcStartPb.fromDate(dcStart);
const dcReq = new GetGatewayDutyCycleMetricsRequest();
dcReq.setGatewayId(props.gateway.getGatewayId());
@ -89,7 +89,7 @@ function GatewayDashboard(props: IProps) {
let lastSeenAt: string = "Never";
if (props.lastSeenAt !== undefined) {
lastSeenAt = moment(props.lastSeenAt).format("YYYY-MM-DD HH:mm:ss");
lastSeenAt = format(props.lastSeenAt, "YYYY-MM-DD HH:mm:ss");
}
return (

4
ui/src/views/gateways/ListGateways.tsx
View File

@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import moment from "moment";
import { format } from "date-fns";
import { Space, Breadcrumb, Button, Badge, Menu, Modal, TreeSelect, Dropdown } from "antd";
import type { ColumnsType } from "antd/es/table";
import { PageHeader } from "@ant-design/pro-layout";
@ -66,7 +66,7 @@ function ListGateways(props: IProps) {
if (record.lastSeenAt !== undefined) {
const ts = new Date(0);
ts.setUTCSeconds(record.lastSeenAt.seconds);
return moment(ts).format("YYYY-MM-DD HH:mm:ss");
return format(ts, "YYYY-MM-DD HH:mm:ss");
}
},
},

4
ui/src/views/gateways/mesh/ListRelayGateways.tsx
View File

@ -1,6 +1,6 @@
import { Link } from "react-router-dom";
import moment from "moment";
import { format } from "date-fns";
import { Space, Breadcrumb, Badge } from "antd";
import type { ColumnsType } from "antd/es/table";
import { PageHeader } from "@ant-design/pro-layout";
@ -46,7 +46,7 @@ function ListRelayGateways(props: IProps) {
if (record.lastSeenAt !== undefined) {
const ts = new Date(0);
ts.setUTCSeconds(record.lastSeenAt.seconds);
return moment(ts).format("YYYY-MM-DD HH:mm:ss");
return format(ts, "YYYY-MM-DD HH:mm:ss");
}
},
},

5
ui/src/views/tenants/TenantDashboard.tsx
View File

@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
import { presetPalettes } from "@ant-design/colors";
import { Card, Col, Row, Space, Empty } from "antd";
import moment from "moment";
import { formatDistanceToNow } from "date-fns";
import type { LatLngTuple, PointTuple } from "leaflet";
import { Popup } from "react-leaflet";
import { Doughnut } from "react-chartjs-2";
@ -64,8 +64,7 @@ function GatewaysMap(props: GatewaysMapProps) {
}
if (item.getLastSeenAt() !== undefined) {
const ts = moment(item.getLastSeenAt()!.toDate());
lastSeen = ts.fromNow();
lastSeen = formatDistanceToNow(item.getLastSeenAt()!.toDate(), { addSuffix: true });
}
markers.push(

2
ui/vite.config.ts
View File

@ -5,7 +5,7 @@ import react from "@vitejs/plugin-react-swc";
export default defineConfig({
build: {
outDir: "build",
sourcemap: true
sourcemap: true,
},
server: {
proxy: {

31
ui/yarn.lock
View File

@ -1044,10 +1044,10 @@ chart.js@^4.4.3:
dependencies:
"@kurkle/color" "^0.3.0"
chartjs-adapter-moment@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102"
integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==
chartjs-adapter-date-fns@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
chartjs-chart-matrix@^2.0.1:
version "2.0.1"
@ -1138,15 +1138,25 @@ csstype@^3.0.2, csstype@^3.1.3:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
dayjs@^1.11.10, dayjs@^1.11.11:
date-fns@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
dayjs@^1.11.10:
version "1.11.10"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
dayjs@^1.11.11:
version "1.11.11"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
debug@^4.0.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
version "4.3.5"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"
integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
version "4.3.4"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
dependencies:
ms "2.1.2"
@ -2066,11 +2076,6 @@ minimatch@^9.0.4:
dependencies:
brace-expansion "^2.0.1"
moment@^2.30.1:
version "2.30.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
ms@2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"