+
+
Physical
+
{blueprint &&
blueprint.engines &&
blueprint.engines.map(({ name, ...props }) => (
@@ -36,7 +36,7 @@ function BlueprintView({
/>
))}
-
+
);
}
diff --git a/ui/src/components/CreateEditVdbeForm.jsx b/ui/src/components/CreateEditVdbeForm.jsx
new file mode 100644
index 00000000..da53ba55
--- /dev/null
+++ b/ui/src/components/CreateEditVdbeForm.jsx
@@ -0,0 +1,219 @@
+import { useState } from "react";
+import { useTheme } from "@mui/material/styles";
+import InsetPanel from "./InsetPanel";
+import CheckCircleOutlineRoundedIcon from "@mui/icons-material/CheckCircleOutlineRounded";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import InputAdornment from "@mui/material/InputAdornment";
+import Button from "@mui/material/Button";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import EditRoundedIcon from "@mui/icons-material/EditRounded";
+import Select from "@mui/material/Select";
+import Chip from "@mui/material/Chip";
+import Box from "@mui/material/Box";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import VdbeView from "./VdbeView";
+import "./styles/CreateEditVdbeForm.css";
+
+const ITEM_HEIGHT = 47;
+const ITEM_PADDING_TOP = 7;
+const MenuProps = {
+ PaperProps: {
+ style: {
+ maxHeight: ITEM_HEIGHT * 3.5 + ITEM_PADDING_TOP,
+ width: 249,
+ },
+ },
+};
+
+function getStyles(name, selectedTables, theme) {
+ return {
+ fontWeight: selectedTables.includes(name)
+ ? theme.typography.fontWeightMedium
+ : theme.typography.fontWeightRegular,
+ };
+}
+
+function TableSelector({ tables }) {
+ const theme = useTheme();
+ const [selectedTables, setSelectedTables] = useState([]);
+
+ const handleChange = (event) => {
+ const {
+ target: { value },
+ } = event;
+ setSelectedTables(
+ // On autofill we get a stringified value.
+ typeof value === "string" ? value.split(",") : value,
+ );
+ };
+
+ return (
+
+
+ Tables
+ }
+ renderValue={(selected) => (
+
+ {selected.map((value) => (
+
+ ))}
+
+ )}
+ MenuProps={MenuProps}
+ >
+ {tables.map((name) => (
+
+ ))}
+
+
+
+ );
+}
+
+function CreateEditFormFields({ vdbe, setVdbe }) {
+ const onStalenessChange = (event) => {
+ const maxStalenessMins = parseInt(event.target.value);
+ if (isNaN(maxStalenessMins)) {
+ setVdbe({ ...vdbe, max_staleness_ms: null });
+ return;
+ }
+ setVdbe({ ...vdbe, max_staleness_ms: maxStalenessMins * 60 * 1000 });
+ };
+
+ const onSloChange = (event) => {
+ const sloMs = parseInt(event.target.value);
+ if (isNaN(sloMs)) {
+ setVdbe({ ...vdbe, p90_latency_slo_ms: null });
+ return;
+ }
+ setVdbe({ ...vdbe, p90_latency_slo_ms: sloMs });
+ };
+
+ const tables = ["tickets", "theatres", "movies"];
+
+ return (
+
+
setVdbe({ ...vdbe, name: event.target.value })}
+ />
+ minutes
+ ),
+ },
+ }}
+ value={
+ vdbe.max_staleness_ms != null ? vdbe.max_staleness_ms / 60000 : ""
+ }
+ onChange={onStalenessChange}
+ />
+ milliseconds
+ ),
+ },
+ }}
+ value={vdbe.p90_latency_slo_ms != null ? vdbe.p90_latency_slo_ms : ""}
+ onChange={onSloChange}
+ />
+
+ Query Interface
+
+
+
+
+ );
+}
+
+function getEmptyVdbe() {
+ return {
+ name: null,
+ max_staleness_ms: null,
+ p90_latency_slo_ms: null,
+ queryInterface: "postgresql",
+ tables: [],
+ };
+}
+
+function CreateEditVdbeForm({ isEdit, currentVdbe }) {
+ const [vdbe, setVdbe] = useState(
+ currentVdbe != null ? currentVdbe : getEmptyVdbe(),
+ );
+
+ return (
+
+
+ {isEdit ? (
+
+ ) : (
+
+ )}
+ {isEdit ? "Edit VDBE" : "Create VDBE"}
+
+
+
+
+ }
+ >
+ {isEdit ? "Save" : "Create"}
+
+
+
+ );
+}
+
+export default CreateEditVdbeForm;
diff --git a/ui/src/components/ExpandableTableSet.jsx b/ui/src/components/ExpandableTableSet.jsx
new file mode 100644
index 00000000..35fb0ee1
--- /dev/null
+++ b/ui/src/components/ExpandableTableSet.jsx
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import ArrowDropUpRoundedIcon from "@mui/icons-material/ArrowDropUpRounded";
+import "./styles/ExpandableTableSet.css";
+
+function ShowMore({ onClick, total }) {
+ return (
+
+
+ Show More ({total - 6})
+
+
+ );
+}
+
+function ShowLess({ onClick }) {
+ return (
+
+ );
+}
+
+function ExpandableTableSet({ children }) {
+ const needsExpansion = children.length > 6;
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+
+
+ {needsExpansion && !expanded && (
+
setExpanded(true)} total={children.length} />
+ )}
+ {needsExpansion && expanded && (
+ setExpanded(false)} />
+ )}
+
+ );
+}
+
+export default ExpandableTableSet;
diff --git a/ui/src/components/InsetPanel.jsx b/ui/src/components/InsetPanel.jsx
new file mode 100644
index 00000000..78c183de
--- /dev/null
+++ b/ui/src/components/InsetPanel.jsx
@@ -0,0 +1,7 @@
+import "./styles/InsetPanel.css";
+
+function InsetPanel({ children, className }) {
+ return
{children}
;
+}
+
+export default InsetPanel;
diff --git a/ui/src/components/PerfView.jsx b/ui/src/components/PerfView.jsx
index 62aa2d1d..d10c794f 100644
--- a/ui/src/components/PerfView.jsx
+++ b/ui/src/components/PerfView.jsx
@@ -3,6 +3,7 @@ import { fetchMetrics } from "../api";
import MetricsManager from "../metrics";
import Panel from "./Panel";
import LatencyPlot from "./LatencyPlot";
+import TroubleshootRoundedIcon from "@mui/icons-material/TroubleshootRounded";
import "./styles/PerfView.css";
const REFRESH_INTERVAL_MS = 30 * 1000;
@@ -134,7 +135,10 @@ function PerfView({ virtualInfra }) {
return (
-
Performance Monitoring
+
+
+ Performance Monitoring
+
(
+
+ onTableHoverEnter(physDbName, name, false, mapped_to)
+ }
+ onTableHoverExit={onTableHoverExit}
+ />
+ ),
+ );
+ const addedTableComponents = addedTablesList.map(({ name, writable }) => (
+ {}}
+ onTableHoverExit={() => {}}
+ />
+ ));
+
return (
)}
-
- {sortedTables.map(({ name, writable, mapped_to }) => (
-
- onTableHoverEnter(physDbName, name, false, mapped_to)
- }
- onTableHoverExit={onTableHoverExit}
- />
- ))}
- {addedTablesList.map(({ name, writable }) => (
- {}}
- onTableHoverExit={() => {}}
- />
- ))}
-
+
+ {[...sortedTableComponents, ...addedTableComponents]}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function VdbeEndpoint({ endpoint, setShowSnackbar }) {
+ const handleCopy = () => {
+ navigator.clipboard.writeText(endpoint);
+ setShowSnackbar(true);
+ };
+ return (
+
+
+
+ {endpoint}
+
+
+ );
+}
+
function VdbeView({
vdbe,
+ endpoint,
highlight,
onTableHoverEnter,
onTableHoverExit,
- workloadState,
- updateWorkloadNumClients,
+ editable,
}) {
const vengName = vdbe.name;
const tables = vdbe.tables;
const freshness = formatFreshness(vdbe.max_staleness_ms);
const peakLatency = formatMilliseconds(vdbe.p90_latency_slo_ms);
const dialect = formatDialect(vdbe.interface);
-
const sortedTables = sortTablesToHoist(highlight, vengName, true, tables);
+ const [showSnackbar, setShowSnackbar] = useState(false);
- const [showWorkloadAdjuster, setShowWorkloadAdjuster] = useState(false);
- const toggleWorkloadAdjuster = useCallback(() => {
- setShowWorkloadAdjuster(!showWorkloadAdjuster);
- }, [showWorkloadAdjuster]);
+ const handleClose = (event, reason) => {
+ if (reason === "clickaway") {
+ return;
+ }
+ setShowSnackbar(false);
+ };
return (
- {workloadState && showWorkloadAdjuster && (
-
+
+ {vengName}
+ {editable && (
+ {}} onDeleteClick={() => {}} />
+ )}
+
+ {endpoint && (
+
)}
-
- {vengName}
-
- - 🌿: {freshness}
- - ⏱️: p90 Query Latency ≤ {peakLatency}
- - 🗣: {dialect}
+ - 🌿: {freshness != null ? freshness : "-----"}
+ -
+ ⏱️:{" "}
+ {peakLatency != null
+ ? `p90 Query Latency ≤ ${peakLatency}`
+ : "-----"}
+
+ - 🗣: {dialect != null ? dialect : "-----"}
-
+
{sortedTables.map(({ name, writable, mapped_to }) => (
))}
-
+
+
- {virtualInfra?.engines?.map((vdbe, index) => (
+
+
Virtual
+
+ {virtualInfra?.engines?.map((vdbe) => (
- updateWorkloadNumClients(index, numClients)
- }
vdbe={vdbe}
+ editable={true}
/>
))}
-
+
+ }
+ sx={{
+ color: "text.secondary",
+ bgcolor: "background.paper",
+ "&:hover": { bgcolor: "#f5f5f5", opacity: 1 },
+ opacity: 0.8,
+ }}
+ >
+ Add New VDBE
+
+
+
);
}
diff --git a/ui/src/components/WorkloadInput.jsx b/ui/src/components/WorkloadInput.jsx
new file mode 100644
index 00000000..aa256fb3
--- /dev/null
+++ b/ui/src/components/WorkloadInput.jsx
@@ -0,0 +1,60 @@
+import Button from "@mui/material/Button";
+import Slider from "@mui/material/Slider";
+import InsetPanel from "./InsetPanel";
+import AutoFixHighRoundedIcon from "@mui/icons-material/AutoFixHighRounded";
+import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+import HelpRoundedIcon from "@mui/icons-material/HelpRounded";
+import Tooltip from "@mui/material/Tooltip";
+import "./styles/WorkloadInput.css";
+
+function WorkloadSlider({ engineName, min, max, value, setValue }) {
+ return (
+
+
Clients on {engineName}
+ setValue(newValue)}
+ />
+
+ );
+}
+
+function WorkloadInput({ min, max }) {
+ const instructions =
+ "Use the sliders to change the number of clients accessing each VDBE. " +
+ "Then, click 'Show Predicted Changes' to see BRAD's predictions for how " +
+ "the physical infrastructure will change.";
+ return (
+
+
+
+ Adjust Workload
+
+
+
+
+
+
+
+
+
+
+
+ }>
+ Show Predicted Changes
+
+
+
+ );
+}
+
+export default WorkloadInput;
diff --git a/ui/src/components/styles/BlueprintView.css b/ui/src/components/styles/BlueprintView.css
index 75053416..d2f4537e 100644
--- a/ui/src/components/styles/BlueprintView.css
+++ b/ui/src/components/styles/BlueprintView.css
@@ -1,4 +1,4 @@
-.bp-view-wrap {
+.bp-view-engines-wrap {
height: auto;
display: flex;
justify-content: space-around;
diff --git a/ui/src/components/styles/CreateEditVdbeForm.css b/ui/src/components/styles/CreateEditVdbeForm.css
new file mode 100644
index 00000000..159cd283
--- /dev/null
+++ b/ui/src/components/styles/CreateEditVdbeForm.css
@@ -0,0 +1,42 @@
+.create-edit-vdbe-form {
+ display: flex;
+ flex-direction: column;
+}
+
+.create-edit-vdbe-form h2 {
+ margin-bottom: 20px;
+}
+
+.cev-form-body {
+ display: flex;
+ flex-direction: row;
+}
+
+.cev-form-fields {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 3;
+ margin-bottom: 10px;
+}
+
+.cev-form-fields .cev-field {
+ margin: 0 0 15px 0;
+}
+
+.cev-preview {
+ flex-grow: 2;
+ display: flex;
+ justify-content: center;
+ margin-top: -20px;
+}
+
+.cev-buttons {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.cev-buttons button {
+ margin-left: 20px;
+}
diff --git a/ui/src/components/styles/ExpandableTableSet.css b/ui/src/components/styles/ExpandableTableSet.css
new file mode 100644
index 00000000..86f5c507
--- /dev/null
+++ b/ui/src/components/styles/ExpandableTableSet.css
@@ -0,0 +1,91 @@
+.expandable-table-set-wrap {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.expandable-table-set {
+ width: 350px;
+}
+
+.expandable-table-set.expandable {
+ overflow: hidden;
+ max-height: 180px;
+ mask-image: linear-gradient(180deg, #000 50%, transparent);
+}
+
+.expandable-table-set-inner {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 340px;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+
+.expandable-table-set-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ cursor: pointer;
+ margin-top: 10px;
+ opacity: 0.35;
+ transition: all 0.25s;
+}
+
+.expandable-table-set-button:hover {
+ opacity: 1;
+}
+
+.show-more {
+ animation-duration: 0.75s;
+ animation-fill-mode: both;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: 1;
+}
+
+.show-more:hover {
+ animation-name: bounce-down;
+}
+
+.show-less {
+ animation-duration: 0.75s;
+ animation-fill-mode: both;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: 1;
+}
+
+.show-less:hover {
+ animation-name: bounce-up;
+}
+
+@keyframes bounce-down {
+ 0% {
+ transform: translateY(0);
+ }
+ 20% {
+ transform: translateY(3px);
+ }
+ 40% {
+ transform: translateY(1px);
+ }
+ 100% {
+ transform: translateY(1px);
+ }
+}
+
+@keyframes bounce-up {
+ 0% {
+ transform: translateY(0);
+ }
+ 20% {
+ transform: translateY(-3px);
+ }
+ 40% {
+ transform: translateY(-1px);
+ }
+ 100% {
+ transform: translateY(-1px);
+ }
+}
diff --git a/ui/src/components/styles/InsetPanel.css b/ui/src/components/styles/InsetPanel.css
new file mode 100644
index 00000000..891855b2
--- /dev/null
+++ b/ui/src/components/styles/InsetPanel.css
@@ -0,0 +1,15 @@
+.inset-panel-wrap {
+ display: flex;
+ flex-direction: column;
+ background-color: #f7f8f8;
+ border-radius: 19px;
+ padding: 29px;
+ margin-bottom: 19px;
+}
+
+.inset-panel-wrap h2 {
+ display: flex;
+ align-items: center;
+ font-size: 1.5em;
+ margin: 0 0 5px 0;
+}
diff --git a/ui/src/components/styles/PerfView.css b/ui/src/components/styles/PerfView.css
index 0fc10359..499d8b60 100644
--- a/ui/src/components/styles/PerfView.css
+++ b/ui/src/components/styles/PerfView.css
@@ -18,11 +18,13 @@
.perf-view-winsel-button {
border-radius: 5px;
width: 80px;
+ height: 100%;
background-color: #f2f2f2;
margin: 0 5px;
border: 0;
font-weight: 400;
font-size: 0.8em;
+ cursor: pointer;
}
.perf-view-winsel-button:hover {
diff --git a/ui/src/components/styles/TableView.css b/ui/src/components/styles/TableView.css
index 2a3375ee..8b8ceaf0 100644
--- a/ui/src/components/styles/TableView.css
+++ b/ui/src/components/styles/TableView.css
@@ -1,12 +1,3 @@
-.db-table-set {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- width: 340px;
- justify-content: space-between;
- align-items: flex-start;
-}
-
.db-table-view {
width: 160px;
height: 35px;
diff --git a/ui/src/components/styles/VdbeView.css b/ui/src/components/styles/VdbeView.css
index 71182e95..cbad6d78 100644
--- a/ui/src/components/styles/VdbeView.css
+++ b/ui/src/components/styles/VdbeView.css
@@ -24,3 +24,50 @@
font-size: 1.2em;
}
+
+.vdbe-db-wrap {
+ position: relative;
+}
+
+.vdbe-edit-controls {
+ position: absolute;
+ top: 0;
+ right: -60px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ opacity: 0;
+ transition: all 0.1s ease-in-out;
+}
+
+.vdbe-edit-button {
+ opacity: 0.5;
+ transition: all 0.1s ease-in-out;
+}
+
+.vdbe-edit-button:hover {
+ opacity: 1;
+}
+
+.vdbe-view:hover .vdbe-edit-controls {
+ opacity: 1;
+}
+
+.vdbe-endpoint {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-size: 1em;
+ margin: 0 0 15px 0;
+ cursor: pointer;
+ color: #1d8033;
+ transition: all 0.2s ease-in-out;
+
+ background-color: #f6fdf7;
+ border-radius: 20px;
+ padding: 3px 8px;
+}
+
+.vdbe-endpoint:hover {
+ color: #51a965;
+}
diff --git a/ui/src/components/styles/VirtualInfraView.css b/ui/src/components/styles/VirtualInfraView.css
index 31ac98af..7b5f4b98 100644
--- a/ui/src/components/styles/VirtualInfraView.css
+++ b/ui/src/components/styles/VirtualInfraView.css
@@ -1,5 +1,13 @@
-.vdbe-view-wrap {
+.vdbe-view-engines-wrap {
flex-grow: 1;
display: flex;
justify-content: space-around;
}
+
+.infra-controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ margin: 20px 0 -20px 0;
+}
diff --git a/ui/src/components/styles/WorkloadInput.css b/ui/src/components/styles/WorkloadInput.css
new file mode 100644
index 00000000..c91efaac
--- /dev/null
+++ b/ui/src/components/styles/WorkloadInput.css
@@ -0,0 +1,26 @@
+.workload-input-sliders {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ margin-bottom: 20px;
+}
+
+.workload-slider {
+ max-width: 400px;
+ flex-grow: 1;
+ margin-right: 30px;
+}
+
+.workload-slider h3 {
+ font-weight: 600;
+ margin: 10px 0 5px 0;
+}
+
+.workload-input-buttons {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.workload-input-buttons button {
+ margin-left: 20px;
+}
diff --git a/ui/src/index.css b/ui/src/index.css
deleted file mode 100644
index 6119ad9a..00000000
--- a/ui/src/index.css
+++ /dev/null
@@ -1,68 +0,0 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/ui/src/main.jsx b/ui/src/main.jsx
index c9900533..1141dbf9 100644
--- a/ui/src/main.jsx
+++ b/ui/src/main.jsx
@@ -1,7 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
-import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(