diff --git a/ui/src/components/VdbeView.jsx b/ui/src/components/VdbeView.jsx
index 0f7e6a68..2e562288 100644
--- a/ui/src/components/VdbeView.jsx
+++ b/ui/src/components/VdbeView.jsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
import DbCylinder from "./DbCylinder";
import TableView from "./TableView";
import ExpandableTableSet from "./ExpandableTableSet";
@@ -5,6 +6,8 @@ import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import EditRoundedIcon from "@mui/icons-material/EditRounded";
import DeleteRoundedIcon from "@mui/icons-material/DeleteRounded";
+import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import Snackbar from "@mui/material/Snackbar";
import "./styles/VdbeView.css";
import {
highlightTableViewClass,
@@ -75,8 +78,24 @@ function EditControls({ onEditClick, onDeleteClick }) {
);
}
+function VdbeEndpoint({ endpoint, setShowSnackbar }) {
+ const handleCopy = () => {
+ navigator.clipboard.writeText(endpoint);
+ setShowSnackbar(true);
+ };
+ return (
+
+
+
+ {endpoint}
+
+
+ );
+}
+
function VdbeView({
vdbe,
+ endpoint,
highlight,
onTableHoverEnter,
onTableHoverExit,
@@ -88,6 +107,14 @@ function VdbeView({
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 handleClose = (event, reason) => {
+ if (reason === "clickaway") {
+ return;
+ }
+ setShowSnackbar(false);
+ };
return (
{}} onDeleteClick={() => {}} />
)}
+ {endpoint && (
+
+ )}
- 🌿: {freshness != null ? freshness : "-----"}
@@ -131,6 +161,12 @@ function VdbeView({
/>
))}
+
);
}
diff --git a/ui/src/components/styles/VdbeView.css b/ui/src/components/styles/VdbeView.css
index e8cd1460..cbad6d78 100644
--- a/ui/src/components/styles/VdbeView.css
+++ b/ui/src/components/styles/VdbeView.css
@@ -52,3 +52,22 @@
.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;
+}