- {virtualInfra?.engines?.map((vdbe, idx) => (
+ {vdbeWithMetrics(
+ virtualInfra,
+ displayMetricsData,
+ showVdbeSpecificMetrics,
+ )?.map(({ vdbe, metrics }) => (
))}
diff --git a/ui/src/components/SystemConfig.jsx b/ui/src/components/SystemConfig.jsx
index 2baee39c..0983d856 100644
--- a/ui/src/components/SystemConfig.jsx
+++ b/ui/src/components/SystemConfig.jsx
@@ -1,11 +1,18 @@
import TextField from "@mui/material/TextField";
-import Modal from "@mui/material/Modal";
import Button from "@mui/material/Button";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
import "./styles/SystemConfig.css";
+// Currently unused.
function EndpointInput({ name, host, port, onChange }) {
return (
-
+
onChange({ host, port: +event.target.value })}
/>
-
+
);
}
-function SystemConfig({ endpoints, open, onCloseClick, onChange }) {
- const { workloadRunners } = endpoints;
+function SystemConfig({ open, onCloseClick, config, onConfigChange }) {
+ const { showVdbeSpecificMetrics } = config;
return (
-
-
-
Dashboard Configuration
- {workloadRunners.map((endpoint, index) => (
-
- onChange({
- field: "workloadRunners",
- value: workloadRunners.map((innerEndpoint, innerIndex) =>
- innerIndex === index ? newEndpoint : innerEndpoint,
- ),
- })
+
-
+
+
+
+
+
+
);
}
diff --git a/ui/src/components/styles/SystemConfig.css b/ui/src/components/styles/SystemConfig.css
index 90100b0e..50fd34f7 100644
--- a/ui/src/components/styles/SystemConfig.css
+++ b/ui/src/components/styles/SystemConfig.css
@@ -1,14 +1,3 @@
-.system-config-modal {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
- border: 2px solid #000;
- z-index: 100;
- padding: 20px;
-}
-
.system-config-modal .endpoint-input {
margin: 20px 0;
}
diff --git a/ui/src/metrics_utils.js b/ui/src/metrics_utils.js
new file mode 100644
index 00000000..49f8be75
--- /dev/null
+++ b/ui/src/metrics_utils.js
@@ -0,0 +1,33 @@
+function extractMetrics({ metrics }, metricName, multiplier) {
+ if (multiplier == null) {
+ multiplier = 1.0;
+ }
+ if (!Object.prototype.hasOwnProperty.call(metrics, metricName)) {
+ return {
+ x: [],
+ y: [],
+ };
+ } else {
+ const innerMetrics = metrics[metricName];
+ return {
+ x: innerMetrics.timestamps.map((val) => val.toLocaleTimeString("en-US")),
+ y: innerMetrics.values.map((val) => val * multiplier),
+ };
+ }
+}
+
+function parseMetrics({ named_metrics }) {
+ const result = {};
+ Object.entries(named_metrics).forEach(([metricName, metricValues]) => {
+ const parsedTs = metricValues.timestamps.map(
+ (timestamp) => new Date(timestamp),
+ );
+ result[metricName] = {
+ timestamps: parsedTs,
+ values: metricValues.values,
+ };
+ });
+ return result;
+}
+
+export { extractMetrics, parseMetrics };