@perses-dev/dashboards 0.2.1 → 0.4.0

package/dist/cjs/components/Dashboard.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dashboard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const material_1 = require("@mui/material");
+const components_1 = require("@perses-dev/components");
+const GridLayout_1 = require("./GridLayout");
+/**
+ * Renders a Dashboard for the provided Dashboard spec.
+ */
+function Dashboard(props) {
+    const { spec, ...others } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ...others, children: (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: spec.layouts.map((layout, idx) => ((0, jsx_runtime_1.jsx)(GridLayout_1.GridLayout, { definition: layout, renderGridItemContent: (definition) => (0, jsx_runtime_1.jsx)(GridLayout_1.GridItemContent, { content: definition.content, spec: spec }) }, idx))) }) }));
+}
+exports.Dashboard = Dashboard;

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridItemContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const components_1 = require("@perses-dev/components");
+const core_1 = require("@perses-dev/core");
+const Panel_1 = require("../Panel");
+/**
+ * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
+ */
+function GridItemContent(props) {
+    const { content, spec } = props;
+    try {
+        const definition = (0, core_1.resolvePanelRef)(spec, content);
+        return (0, jsx_runtime_1.jsx)(Panel_1.Panel, { definition: definition });
+    }
+    catch (err) {
+        return (0, jsx_runtime_1.jsx)(components_1.ErrorAlert, { error: err });
+    }
+}
+exports.GridItemContent = GridItemContent;

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const GridTitle_1 = require("./GridTitle");
+const COLUMNS = 24;
+/**
+ * Layout component that arranges children in a Grid based on the definition.
+ */
+function GridLayout(props) {
+    var _a, _b;
+    const { definition: { display, items }, renderGridItemContent, ...others } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)((_b = (_a = display === null || display === void 0 ? void 0 : display.collapse) === null || _a === void 0 ? void 0 : _a.open) !== null && _b !== void 0 ? _b : true);
+    const gridItems = [];
+    let mobileRowStart = 1;
+    items.forEach((item, idx) => {
+        // Try to maintain the chart's aspect ratio on mobile
+        const widthScale = COLUMNS / item.width;
+        const mobileRows = Math.floor(item.height * widthScale);
+        gridItems.push((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                gridColumn: {
+                    xs: `1 / span ${COLUMNS}`,
+                    sm: `${item.x + 1} / span ${item.width}`,
+                },
+                gridRow: {
+                    xs: `${mobileRowStart} / span ${mobileRows}`,
+                    sm: `${item.y + 1} / span ${item.height}`,
+                },
+            }, children: renderGridItemContent(item) }, idx));
+        mobileRowStart += mobileRows;
+    });
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { title: display.title, collapse: display.collapse === undefined
+                    ? undefined
+                    : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) } })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'grid',
+                        gridTemplateColumns: `repeat(${COLUMNS}, 1fr)`,
+                        gridAutoRows: {
+                            xs: 24,
+                            sm: 36,
+                        },
+                        columnGap: (theme) => theme.spacing(1),
+                        rowGap: (theme) => theme.spacing(1),
+                    }, children: gridItems }) })] }));
+}
+exports.GridLayout = GridLayout;

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const material_1 = require("@mui/material");
+const ChevronUp_1 = __importDefault(require("mdi-material-ui/ChevronUp"));
+const ChevronDown_1 = __importDefault(require("mdi-material-ui/ChevronDown"));
+/**
+ * Renders the title for a Grid section, optionally also supporting expanding
+ * and collapsing
+ */
+function GridTitle(props) {
+    const { title, collapse } = props;
+    const text = ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", sx: { marginLeft: collapse !== undefined ? 1 : undefined }, children: title }));
+    // If we don't need expand/collapse, just render the title text
+    if (collapse === undefined) {
+        return text;
+    }
+    // Otherwise render something clickable
+    return ((0, jsx_runtime_1.jsxs)(material_1.ButtonBase, { component: "header", sx: {
+            display: 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+        }, onClick: collapse.onToggleOpen, children: [collapse.isOpen ? (0, jsx_runtime_1.jsx)(ChevronUp_1.default, {}) : (0, jsx_runtime_1.jsx)(ChevronDown_1.default, {}), text] }));
+}
+exports.GridTitle = GridTitle;

package/dist/cjs/components/GridLayout/index.js

@@ -0,0 +1,30 @@
+"use strict";
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./GridLayout"), exports);
+__exportStar(require("./GridItemContent"), exports);

package/dist/cjs/components/Panel.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const components_1 = require("@perses-dev/components");
+const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
+/**
+ * Renders a PanelDefinition's content inside of a Card.
+ */
+function Panel(props) {
+    const { definition, ...others } = props;
+    const [contentElement, setContentElement] = (0, react_1.useState)(null);
+    const isStatsChart = definition.kind === 'StatChart';
+    const panelPadding = isStatsChart ? 0 : 2;
+    const { width, height } = (0, use_resize_observer_1.default)({ ref: contentElement });
+    const contentDimensions = (0, react_1.useMemo)(() => {
+        if (width === undefined || height === undefined)
+            return undefined;
+        return { width, height };
+    }, [width, height]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Card, { sx: {
+            ...others.sx,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexFlow: 'column nowrap',
+        }, variant: "outlined", ...others, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "body2", fontWeight: (theme) => theme.typography.fontWeightMedium, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: definition.display.name }), sx: {
+                    display: 'block',
+                    padding: (theme) => theme.spacing(1, 2),
+                } }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    flexGrow: 1,
+                    padding: (theme) => theme.spacing(panelPadding),
+                    // Override MUI default style for last-child
+                    ':last-child': {
+                        padding: (theme) => theme.spacing(panelPadding),
+                    },
+                }, ref: setContentElement, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PanelComponent, { definition: definition, contentDimensions: contentDimensions }) }) })] }));
+}
+exports.Panel = Panel;

package/dist/cjs/components/VariableAutocomplete.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariableAutocomplete = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+/**
+ * A MUI Autocomplete that displays variable options, loaded from the
+ * appropriate plugin.
+ */
+function VariableAutocomplete(props) {
+    const { definition, state, onChange, onOptionsChange, TextFieldProps } = props;
+    const { value, options } = state;
+    const allValue = 'all_value' in definition.selection ? definition.selection.all_value : undefined;
+    const displayOptions = (0, react_1.useMemo)(() => {
+        let displayOptions = options;
+        // During initial loading, options will be undefined, so make sure we have
+        // an option for the current value
+        if (displayOptions === undefined) {
+            displayOptions = Array.isArray(value) ? value : [value];
+        }
+        // The All option is not actually stored in the options state, so make
+        // sure that exists at the start of the options array
+        if (allValue !== undefined && displayOptions[0] !== allValue) {
+            displayOptions = [allValue, ...displayOptions];
+        }
+        return displayOptions;
+    }, [options, value, allValue]);
+    // Load the options from the server and update state whenever that data
+    // changes
+    const { data, loading, error } = (0, plugin_system_1.useVariableOptions)(definition);
+    (0, react_1.useEffect)(() => {
+        if (loading)
+            return;
+        onOptionsChange(data);
+        // We don't want to fire this event every time we render if the user doesn't wrap onOptionsChange with useCallback
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, loading]);
+    const handleChange = (e, nextValue) => {
+        onChange(nextValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { options: displayOptions, loading: loading, value: value, multiple: Array.isArray(value), disableClearable: true, freeSolo: false, onChange: handleChange, renderInput: (params) => {
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, margin: "normal", label: definition.display.label, error: error !== undefined, helperText: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : '', ...TextFieldProps }));
+        }, getOptionLabel: (option) => (option === allValue ? 'All' : option), ChipProps: {
+            color: 'default',
+            variant: 'outlined',
+        } }));
+}
+exports.VariableAutocomplete = VariableAutocomplete;

package/dist/cjs/components/VariableOptionsDrawer.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariableOptionsDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const material_1 = require("@mui/material");
+const components_1 = require("@perses-dev/components");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const context_1 = require("../context");
+const VariableAutocomplete_1 = require("./VariableAutocomplete");
+const DRAWER_WIDTH = 296;
+/**
+ * Dashboard options drawer that includes variable inputs.
+ */
+function VariableOptionsDrawer(props) {
+    const { variables, sx, ...others } = props;
+    const { variables: variablesState } = (0, plugin_system_1.useTemplateVariables)();
+    const { setValue, setOptions } = (0, context_1.useTemplateVariablesSetters)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: (0, components_1.combineSx)({
+            width: DRAWER_WIDTH,
+            flexShrink: 0,
+            padding: (theme) => theme.spacing(1, 2),
+            borderLeft: (theme) => `1px solid ${theme.palette.divider}`,
+        }, sx), square: true, elevation: 0, ...others, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "h6", children: "Variables" }), Object.entries(variables).map(([variableName, variableDef]) => {
+                if (variableDef.display.hide === true)
+                    return null;
+                const variableState = variablesState[variableName];
+                if (variableState === undefined) {
+                    const error = new Error(`Variable state for '${variableName}' not found`);
+                    return (0, jsx_runtime_1.jsx)(components_1.ErrorAlert, { error: error }, variableName);
+                }
+                return ((0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(VariableAutocomplete_1.VariableAutocomplete, { definition: variableDef, state: variableState, onChange: (value) => setValue(variableName, value), onOptionsChange: (options) => setOptions(variableName, options) }) }, variableName));
+            })] }));
+}
+exports.VariableOptionsDrawer = VariableOptionsDrawer;

package/dist/cjs/components/index.js

@@ -0,0 +1,33 @@
+"use strict";
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Dashboard"), exports);
+__exportStar(require("./GridLayout"), exports);
+__exportStar(require("./Panel"), exports);
+__exportStar(require("./VariableAutocomplete"), exports);
+__exportStar(require("./VariableOptionsDrawer"), exports);

package/dist/cjs/context/TemplateVariablesProvider.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTemplateVariablesSetters = exports.TemplateVariablesSettersContext = exports.TemplateVariablesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const use_immer_1 = require("use-immer");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+/**
+ * Provider implementation that supplies the TemplateVariables at runtime.
+ */
+function TemplateVariablesProvider(props) {
+    const { children, variableDefinitions } = props;
+    // TODO: Do we need to support re-init if variableDefinitions changes?
+    const [state, setState] = (0, use_immer_1.useImmer)(() => {
+        const variables = {};
+        Object.entries(variableDefinitions).forEach(([variableName, definition]) => {
+            variables[variableName] = {
+                value: definition.selection.default_value,
+                options: undefined,
+            };
+        });
+        return variables;
+    });
+    const setValue = (0, react_1.useCallback)((name, next) => {
+        const variableDef = variableDefinitions[name];
+        if (variableDef === undefined) {
+            throw new Error(`Unknown variable '${name}'`);
+        }
+        const defaultValue = variableDef.selection.default_value;
+        const allValue = 'all_value' in variableDef.selection ? variableDef.selection.all_value : undefined;
+        if (typeof defaultValue === 'object') {
+            // Shouldn't be able to assign a string to a multi select
+            if (typeof next !== 'object') {
+                throw new Error(`Invalid value '${next}' for multi-select`);
+            }
+            // If selections are completely removed, just go back to the default
+            // value
+            if (next.length === 0) {
+                next = defaultValue;
+            }
+        }
+        else {
+            // Shouldn't be able to assign a string[] to a single select
+            if (typeof next !== 'string') {
+                throw new Error(`Invalid value '${next}' for single-select`);
+            }
+        }
+        setState((draft) => {
+            const variableState = draft[name];
+            if (variableState === undefined) {
+                throw new Error(`Unknown variable '${name}'`);
+            }
+            // If the "All" value is in the next selections, we need to either
+            // remove it (because they selected something more specific) or
+            // ensure it's the only selection (because they just selected it)
+            if (allValue !== undefined && typeof next === 'object' && next.length > 1 && next.includes(allValue)) {
+                const current = variableState.value;
+                if (typeof current === 'object') {
+                    const hasAll = current.includes(allValue);
+                    if (hasAll) {
+                        next = next.filter((val) => val !== allValue);
+                    }
+                    else {
+                        next = [allValue];
+                    }
+                }
+            }
+            variableState.value = next;
+        });
+    }, [setState, variableDefinitions]);
+    const setOptions = (0, react_1.useCallback)((name, options) => {
+        const variableDef = variableDefinitions[name];
+        if (variableDef === undefined) {
+            throw new Error(`Unknown variable '${name}'`);
+        }
+        let capturingRegex = undefined;
+        if (variableDef.capturing_regexp !== undefined) {
+            let pattern = variableDef.capturing_regexp;
+            let flags = '';
+            // Regex expressions can start with / so that flags can be provided
+            // at the end, so account for those
+            if (pattern.startsWith('/')) {
+                const endIdx = pattern.lastIndexOf('/');
+                if (endIdx > 0) {
+                    flags = pattern.substring(endIdx + 1);
+                    pattern = pattern.substring(1, endIdx);
+                }
+            }
+            // TODO: Do we need to account for stateful flags (gy) and create a
+            // new Regex each time to compare an option to?
+            capturingRegex = new RegExp(pattern, flags);
+        }
+        // Get the unique options, optionally running the capturing regex
+        const uniqueOptions = new Set();
+        options.forEach((option) => {
+            if (capturingRegex !== undefined) {
+                const match = capturingRegex.exec(option);
+                if (match !== null && match[0] !== undefined) {
+                    option = match[0];
+                }
+            }
+            uniqueOptions.add(option);
+        });
+        // Set the options in variable state
+        setState((draft) => {
+            const variableState = draft[name];
+            if (variableState === undefined) {
+                throw new Error(`Unknown variable '${name}'`);
+            }
+            variableState.options = Array.from(uniqueOptions);
+        });
+    }, [setState, variableDefinitions]);
+    // Memo since it's being passed via context
+    const ctx = (0, react_1.useMemo)(() => ({ variables: state }), [state]);
+    const setters = (0, react_1.useMemo)(() => ({ setValue, setOptions }), [setValue, setOptions]);
+    return ((0, jsx_runtime_1.jsx)(exports.TemplateVariablesSettersContext.Provider, { value: setters, children: (0, jsx_runtime_1.jsx)(plugin_system_1.TemplateVariablesContext.Provider, { value: ctx, children: children }) }));
+}
+exports.TemplateVariablesProvider = TemplateVariablesProvider;
+exports.TemplateVariablesSettersContext = (0, react_1.createContext)(undefined);
+/**
+ * Gets the setters for Template Variables provided by the TemplateVariablesProvider at runtime.
+ */
+function useTemplateVariablesSetters() {
+    const ctx = (0, react_1.useContext)(exports.TemplateVariablesSettersContext);
+    if (ctx === undefined) {
+        throw new Error('No TemplateVariablesSettersContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useTemplateVariablesSetters = useTemplateVariablesSetters;

package/dist/cjs/context/TimeRangeStateProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeStateProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const core_1 = require("@perses-dev/core");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+/**
+ * Provider implementation that supplies the TimeRangeState at runtime.
+ */
+function TimeRangeStateProvider(props) {
+    const { initialValue, children } = props;
+    // Use initialValue to populate state (TODO: Will prob need to expose "setter" API eventually)
+    const [timeRange] = (0, react_1.useState)(() => {
+        if ('pastDuration' in initialValue) {
+            return (0, core_1.toAbsoluteTimeRange)(initialValue);
+        }
+        return initialValue;
+    });
+    const ctx = (0, react_1.useMemo)(() => ({ timeRange }), [timeRange]);
+    return (0, jsx_runtime_1.jsx)(plugin_system_1.TimeRangeContext.Provider, { value: ctx, children: children });
+}
+exports.TimeRangeStateProvider = TimeRangeStateProvider;

package/dist/cjs/context/index.js

@@ -0,0 +1,30 @@
+"use strict";
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TemplateVariablesProvider"), exports);
+__exportStar(require("./TimeRangeStateProvider"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,31 @@
+"use strict";
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./views"), exports);

package/dist/cjs/views/ViewDashboard.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewDashboard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const material_1 = require("@mui/material");
+const components_1 = require("@perses-dev/components");
+const context_1 = require("../context");
+const components_2 = require("../components");
+/**
+ * The View for displaying a Dashboard, along with the UI for selecting variable values.
+ */
+function ViewDashboard(props) {
+    const { dashboardResource, sx, children, ...others } = props;
+    return ((0, jsx_runtime_1.jsx)(context_1.TimeRangeStateProvider, { initialValue: { pastDuration: dashboardResource.spec.duration }, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: dashboardResource.spec.variables, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: (0, components_1.combineSx)({
+                    display: 'flex',
+                    width: '100%',
+                    height: '100%',
+                    position: 'relative',
+                    overflow: 'hidden',
+                }, sx), ...others, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            padding: (theme) => theme.spacing(1, 2),
+                            flexGrow: 1,
+                            overflowX: 'hidden',
+                            overflowY: 'auto',
+                        }, children: [(0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboardResource.spec }), children] }), (0, jsx_runtime_1.jsx)(components_2.VariableOptionsDrawer, { variables: dashboardResource.spec.variables })] }) }) }));
+}
+exports.ViewDashboard = ViewDashboard;

package/dist/cjs/views/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ViewDashboard"), exports);

package/dist/components/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAQ,SAAS,EAAuC,MAAM,eAAe,CAAC;AAIrF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA+DtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAQ,SAAS,EAAuC,MAAM,eAAe,CAAC;AAIrF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA8DtC"}

package/dist/components/Panel.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import{Card,CardHeader,CardContent,Typography}from"@mui/material";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert}from"@perses-dev/components";import useResizeObserver from"use-resize-observer";export function Panel(e){const{definition:r,...i}=e,[o,n]=useState(null),t="StatChart"===r.kind,s=t?0:2,{width:a,height:d}=useResizeObserver({ref:o}),l=useMemo((()=>{if(void 0!==a&&void 0!==d)return{width:a,height:d}}),[a,d]);return _jsxs(Card,{sx:{...i.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap",overflow:t?"hidden":"visible"},variant:"outlined",...i,children:[_jsx(CardHeader,{title:_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:r.display.name}),sx:{display:"block",padding:e=>e.spacing(1,2)}}),_jsx(CardContent,{sx:{position:"relative",flexGrow:1,padding:e=>e.spacing(s),":last-child":{padding:e=>e.spacing(s)}},ref:n,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(PanelComponent,{definition:r,contentDimensions:l})})})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import{Card,CardHeader,CardContent,Typography}from"@mui/material";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert}from"@perses-dev/components";import useResizeObserver from"use-resize-observer";export function Panel(e){const{definition:r,...i}=e,[o,n]=useState(null),t="StatChart"===r.kind?0:2,{width:s,height:a}=useResizeObserver({ref:o}),d=useMemo((()=>{if(void 0!==s&&void 0!==a)return{width:s,height:a}}),[s,a]);return _jsxs(Card,{sx:{...i.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...i,children:[_jsx(CardHeader,{title:_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:r.display.name}),sx:{display:"block",padding:e=>e.spacing(1,2)}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(t),":last-child":{padding:e=>e.spacing(t)}},ref:n,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(PanelComponent,{definition:r,contentDimensions:d})})})]})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -12,24 +12,26 @@
     "url": "https://github.com/perses/perses/issues"
   },
   "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist/",
-    "build": "tsc",
+    "build": "tsc --build",
+    "build:cjs": "tsc --project ./tsconfig.cjs.json",
     "test": "echo 'no test to run' && exit 0",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@mui/material": "^5.5.1",
-    "@perses-dev/components": "^0.2.1",
-    "@perses-dev/core": "^0.2.1",
-    "@perses-dev/plugin-system": "^0.2.1",
+    "@perses-dev/components": "^0.4.0",
+    "@perses-dev/core": "^0.4.0",
+    "@perses-dev/plugin-system": "^0.4.0",
     "immer": "^9.0.12",
     "use-immer": "^0.6.0",
     "use-resize-observer": "^8.0.0"
   },
   "peerDependencies": {
+    "@mui/material": "^5.5.1",
     "react": "^17.0.2"
   },
   "files": [