diff --git a/ui100/package-lock.json b/ui100/package-lock.json
index d5cf1b97..d28a2e65 100644
--- a/ui100/package-lock.json
+++ b/ui100/package-lock.json
@@ -15,13 +15,12 @@
"@mui/x-charts": "^7.24.1",
"@xyflow/react": "^12.3.5",
"d3-hierarchy": "^3.1.2",
+ "date-fns": "^4.1.0",
"formik": "^2.4.6",
"material-react-table": "^3.1.0",
- "moment": "^2.30.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^7.0.1",
- "recharts": "^2.15.1",
"yup": "^1.6.1",
"zustand": "^5.0.2"
},
@@ -2026,12 +2025,6 @@
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
"license": "MIT"
},
- "node_modules/@types/d3-array": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
- "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
- "license": "MIT"
- },
"node_modules/@types/d3-color": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
@@ -2053,12 +2046,6 @@
"@types/d3-selection": "*"
}
},
- "node_modules/@types/d3-ease": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
- "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
- "license": "MIT"
- },
"node_modules/@types/d3-hierarchy": {
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
@@ -2111,12 +2098,6 @@
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
"license": "MIT"
},
- "node_modules/@types/d3-timer": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
- "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
- "license": "MIT"
- },
"node_modules/@types/d3-transition": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
@@ -3017,6 +2998,16 @@
"node": ">=12"
}
},
+ "node_modules/date-fns": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+ "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/kossnocorp"
+ }
+ },
"node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -3034,12 +3025,6 @@
}
}
},
- "node_modules/decimal.js-light": {
- "version": "2.5.1",
- "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
- "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
- "license": "MIT"
- },
"node_modules/deep-is": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3329,12 +3314,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/eventemitter3": {
- "version": "4.0.7",
- "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
- "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
- "license": "MIT"
- },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3342,15 +3321,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/fast-equals": {
- "version": "5.2.2",
- "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
- "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
- "license": "MIT",
- "engines": {
- "node": ">=6.0.0"
- }
- },
"node_modules/fast-glob": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -3948,6 +3918,8 @@
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
+ "optional": true,
+ "peer": true,
"engines": {
"node": "*"
}
@@ -4298,21 +4270,6 @@
}
}
},
- "node_modules/react-smooth": {
- "version": "4.0.4",
- "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
- "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
- "license": "MIT",
- "dependencies": {
- "fast-equals": "^5.0.1",
- "prop-types": "^15.8.1",
- "react-transition-group": "^4.4.5"
- },
- "peerDependencies": {
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
- }
- },
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -4329,38 +4286,6 @@
"react-dom": ">=16.6.0"
}
},
- "node_modules/recharts": {
- "version": "2.15.1",
- "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
- "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
- "license": "MIT",
- "dependencies": {
- "clsx": "^2.0.0",
- "eventemitter3": "^4.0.1",
- "lodash": "^4.17.21",
- "react-is": "^18.3.1",
- "react-smooth": "^4.0.4",
- "recharts-scale": "^0.4.4",
- "tiny-invariant": "^1.3.1",
- "victory-vendor": "^36.6.8"
- },
- "engines": {
- "node": ">=14"
- },
- "peerDependencies": {
- "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
- "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
- }
- },
- "node_modules/recharts-scale": {
- "version": "0.4.5",
- "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
- "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
- "license": "MIT",
- "dependencies": {
- "decimal.js-light": "^2.4.1"
- }
- },
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -4595,12 +4520,6 @@
"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
"license": "MIT"
},
- "node_modules/tiny-invariant": {
- "version": "1.3.3",
- "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
- "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
- "license": "MIT"
- },
"node_modules/tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -4759,28 +4678,6 @@
"punycode": "^2.1.0"
}
},
- "node_modules/victory-vendor": {
- "version": "36.9.2",
- "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
- "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
- "license": "MIT AND ISC",
- "dependencies": {
- "@types/d3-array": "^3.0.3",
- "@types/d3-ease": "^3.0.0",
- "@types/d3-interpolate": "^3.0.1",
- "@types/d3-scale": "^4.0.2",
- "@types/d3-shape": "^3.1.0",
- "@types/d3-time": "^3.0.0",
- "@types/d3-timer": "^3.0.0",
- "d3-array": "^3.1.6",
- "d3-ease": "^3.0.1",
- "d3-interpolate": "^3.0.1",
- "d3-scale": "^4.0.2",
- "d3-shape": "^3.1.0",
- "d3-time": "^3.0.0",
- "d3-timer": "^3.0.1"
- }
- },
"node_modules/vite": {
"version": "5.4.14",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
diff --git a/ui100/package.json b/ui100/package.json
index 4dc86f11..e9a6136f 100644
--- a/ui100/package.json
+++ b/ui100/package.json
@@ -17,13 +17,12 @@
"@mui/x-charts": "^7.24.1",
"@xyflow/react": "^12.3.5",
"d3-hierarchy": "^3.1.2",
+ "date-fns": "^4.1.0",
"formik": "^2.4.6",
"material-react-table": "^3.1.0",
- "moment": "^2.30.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^7.0.1",
- "recharts": "^2.15.1",
"yup": "^1.6.1",
"zustand": "^5.0.2"
},
diff --git a/ui100/src/AccountMetricsModal.tsx b/ui100/src/AccountMetricsModal.tsx
index 1b5db4ec..b0224cc4 100644
--- a/ui100/src/AccountMetricsModal.tsx
+++ b/ui100/src/AccountMetricsModal.tsx
@@ -12,7 +12,7 @@ interface AccountMetricsModalProps {
user: User;
}
-const AccountMetricsModal = ({ close, isOpen, user}: AccountMetricsModalProps) => {
+const AccountMetricsModal = ({ close, isOpen, user }: AccountMetricsModalProps) => {
const [metrics30, setMetrics30] = useState(buildMetrics([]));
const [metrics7, setMetrics7] = useState(buildMetrics([]));
const [metrics1, setMetrics1] = useState(buildMetrics([]));
@@ -46,7 +46,7 @@ const AccountMetricsModal = ({ close, isOpen, user}: AccountMetricsModalProps) =
console.log("accountMetricsModal", ex.message);
});
});
- }, []);
+ }, [isOpen]);
return (
@@ -54,9 +54,9 @@ const AccountMetricsModal = ({ close, isOpen, user}: AccountMetricsModalProps) =
Account Metrics
-
-
-
+
+
+
);
diff --git a/ui100/src/EnvironmentMetricsModal.tsx b/ui100/src/EnvironmentMetricsModal.tsx
index 769a5ba9..7d2d0d00 100644
--- a/ui100/src/EnvironmentMetricsModal.tsx
+++ b/ui100/src/EnvironmentMetricsModal.tsx
@@ -48,7 +48,7 @@ const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: Environme
console.log("environmentMetricsModal", ex.message);
});
});
- }, []);
+ }, [isOpen, environment]);
return (
@@ -56,9 +56,9 @@ const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: Environme
Environment Metrics
-
-
-
+
+
+
);
diff --git a/ui100/src/MetricsGraph.tsx b/ui100/src/MetricsGraph.tsx
index 8461a0b9..0675120c 100644
--- a/ui100/src/MetricsGraph.tsx
+++ b/ui100/src/MetricsGraph.tsx
@@ -1,19 +1,33 @@
import {Grid2, Typography} from "@mui/material";
-import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from "recharts";
-import moment from "moment";
+import {LineChart} from "@mui/x-charts";
+import {useEffect, useState} from "react";
import {bytesToSize} from "./model/util.ts";
+import {format} from "date-fns";
+
+const MetricsGraph = ({ title, showTime, data }) => {
+ const [rxData, setRxData] = useState([]);
+ const [txData, setTxData] = useState([]);
+ const [timestamps, setTimestamps] = useState([]);
+ const dateFormat = showTime ? "dd-MMM H:mm" : "dd-MMM"
+
+ useEffect(() => {
+ if(data) {
+ setRxData(data.map(v => v.rx ? v.rx : 0));
+ setTxData(data.map(v => v.tx ? v.tx : 0 ));
+ setTimestamps(data.map(v => v.timestamp));
+ }
+ }, [data]);
-const MetricsGraph = ({ title, data }) => {
return (
- {title}
-
-
- v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%', fontFamily: "Poppins" }}/>
- bytesToSize(v)} style={{ fontSize: '75%', fontFamily: "Poppins" }}/>
- v.tx ? v.tx : 0} stackId={"1"} />
- v.rx ? v.rx : 0} stackId={"1"} />
-
+ {title}
+ { return bytesToSize(v as number) } },
+ { data: txData, label: "tx", color: "#9bf316", area: true, stack: "total", showMark: false, valueFormatter: (v) => { return bytesToSize(v as number) } }
+ ]}
+ xAxis={[{ scaleType: "time", data: timestamps, valueFormatter: (v) => { return format(new Date(v), dateFormat) } }]}
+ yAxis={[{ valueFormatter: (v) => { return bytesToSize(v) } }]}
+ />
);
}
diff --git a/ui100/src/ShareMetricsModal.tsx b/ui100/src/ShareMetricsModal.tsx
index 87edf9f0..51475285 100644
--- a/ui100/src/ShareMetricsModal.tsx
+++ b/ui100/src/ShareMetricsModal.tsx
@@ -48,7 +48,7 @@ const ShareMetricsModal = ({ close, isOpen, user, share }: ShareMetricsModalProp
console.log("shareMetricsModal", ex.message);
});
});
- }, []);
+ }, [isOpen, share]);
return (
@@ -56,9 +56,9 @@ const ShareMetricsModal = ({ close, isOpen, user, share }: ShareMetricsModalProp
Share Metrics
-
-
-
+
+
+
);