@perses-dev/dashboards 0.9.0 → 0.10.0

package/dist/cjs/components/Variables/VariableEditor.js

@@ -0,0 +1,207 @@
+// Copyright 2022 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "VariableEditor", {
+    enumerable: true,
+    get: ()=>VariableEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _useImmer = require("use-immer");
+const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
+const _variableEditorForm = require("./VariableEditorForm");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function VariableEditor(props) {
+    const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
+    const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
+    const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const removeVariable = (index)=>{
+        setVariableDefinitions((draft)=>{
+            draft.splice(index, 1);
+        });
+    };
+    const addVariable = ()=>{
+        setVariableDefinitions((draft)=>{
+            draft.push({
+                kind: 'TextVariable',
+                spec: {
+                    name: 'NewVariable',
+                    value: ''
+                }
+            });
+        });
+    };
+    const toggleVariableVisibility = (index, visible)=>{
+        setVariableDefinitions((draft)=>{
+            const v = draft[index];
+            if (!v) {
+                return;
+            }
+            if (!v.spec.display) {
+                v.spec.display = {
+                    hidden: false
+                };
+            }
+            v.spec.display.hidden = visible === false;
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        p: 4,
+        children: [
+            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Edit Variable"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
+                        initialVariableDefinition: currentEditingVariableDefinition,
+                        onChange: (definition)=>{
+                            setVariableDefinitions((draft)=>{
+                                draft[variableEditIdx] = definition;
+                                setVariableEditIdx(null);
+                            });
+                        },
+                        onCancel: ()=>setVariableEditIdx(null)
+                    })
+                ]
+            }),
+            !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        justifyContent: "end",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>{
+                                    props.onCancel();
+                                },
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                disabled: props.variableDefinitions === variableDefinitions,
+                                variant: "contained",
+                                onClick: ()=>{
+                                    props.onChange(variableDefinitions);
+                                },
+                                children: "Apply Changes"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Variable List"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+                                component: _material.Paper,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
+                                    sx: {
+                                        minWidth: 650
+                                    },
+                                    "aria-label": "simple table",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Visibility"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Variable Name"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Variable Type"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        align: "right",
+                                                        children: "Action"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+                                            children: variableDefinitions.map((v, idx)=>{
+                                                var ref;
+                                                /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                                checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
+                                                                onChange: (e)=>{
+                                                                    toggleVariableVisibility(idx, e.target.checked);
+                                                                }
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            sx: {
+                                                                fontWeight: 'bold'
+                                                            },
+                                                            children: v.spec.name
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            children: v.kind
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
+                                                            align: "right",
+                                                            children: [
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>setVariableEditIdx(idx),
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>removeVariable(idx),
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                }, v.spec.name);
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                display: "flex",
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    onClick: addVariable,
+                                    variant: "contained",
+                                    children: "Add New Variable"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -0,0 +1,236 @@
+// Copyright 2022 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "VariableEditForm", {
+    enumerable: true,
+    get: ()=>VariableEditForm
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _useImmer = require("use-immer");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _variableEditorFormModel = require("./variable-editor-form-model");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const VARIABLE_TYPES = [
+    'ListVariable',
+    'TextVariable'
+];
+const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        pb: 2,
+        variant: "subtitle1",
+        children: children
+    });
+function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
+    const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                children: "General"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                container: true,
+                spacing: 2,
+                mb: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            label: "Name",
+                            value: state.name,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.name = v.target.value;
+                                });
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                    id: "variable-type-select-label",
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+                                    labelId: "variable-type-select-label",
+                                    id: "variable-type-select",
+                                    label: "Type",
+                                    value: state.kind,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.kind = v.target.value;
+                                        });
+                                    },
+                                    children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                            value: v,
+                                            children: v
+                                        }, v))
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            label: "Label",
+                            value: state.label,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.label = v.target.value;
+                                });
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 12,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            label: "Description",
+                            value: state.description,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.description = v.target.value;
+                                });
+                            }
+                        })
+                    })
+                ]
+            }),
+            state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                        children: "Text Options"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 12,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                label: "Value",
+                                value: state.textVariableFields.value,
+                                onChange: (v)=>{
+                                    setState((draft)=>{
+                                        draft.textVariableFields.value = v.target.value;
+                                    });
+                                }
+                            })
+                        })
+                    })
+                ]
+            }),
+            state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                        children: "List Options"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 6,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
+                                width: 500,
+                                pluginType: "Variable",
+                                pluginKindLabel: "Source",
+                                value: state.listVariableFields.plugin,
+                                onChange: (val)=>{
+                                    setState((draft)=>{
+                                        draft.listVariableFields.plugin = val;
+                                    });
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                        children: "Dropdown Options"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                        container: true,
+                        spacing: 1,
+                        mb: 1,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                children: [
+                                    "Allow Multiple",
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                        checked: state.listVariableFields.allowMultiple,
+                                        onChange: (e)=>{
+                                            setState((draft)=>{
+                                                draft.listVariableFields.allowMultiple = e.target.checked;
+                                            });
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                children: [
+                                    "Allow All",
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                        checked: state.listVariableFields.allowAll,
+                                        onChange: (e)=>{
+                                            setState((draft)=>{
+                                                draft.listVariableFields.allowAll = e.target.checked;
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: 'row',
+                spacing: 2,
+                justifyContent: "end",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        onClick: ()=>{
+                            onCancel();
+                        },
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        onClick: ()=>{
+                            onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
+                        },
+                        children: "Update Variable"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/cjs/components/Variables/VariableEditorForm/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./VariableEditorForm"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -0,0 +1,88 @@
+// Copyright 2022 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getInitialState: ()=>getInitialState,
+    getVariableDefinitionFromState: ()=>getVariableDefinitionFromState
+});
+function getInitialState(initialVariableDefinition) {
+    var ref;
+    var _value;
+    const textVariableFields = {
+        value: (_value = initialVariableDefinition.spec.value) !== null && _value !== void 0 ? _value : ''
+    };
+    const listVariableFields = {
+        allowMultiple: false,
+        allowAll: false,
+        plugin: {
+            kind: '',
+            spec: {}
+        }
+    };
+    if (initialVariableDefinition.kind === 'ListVariable') {
+        var _allow_all_value;
+        listVariableFields.allowMultiple = (_allow_all_value = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value !== void 0 ? _allow_all_value : false;
+        var _allow_all_value1;
+        listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
+        listVariableFields.plugin = initialVariableDefinition.spec.plugin;
+    }
+    return {
+        name: initialVariableDefinition.spec.name,
+        label: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.label,
+        kind: initialVariableDefinition.kind,
+        description: '',
+        listVariableFields,
+        textVariableFields
+    };
+}
+function getVariableDefinitionFromState(state) {
+    const { name , label , kind  } = state;
+    const commonSpec = {
+        name,
+        display: {
+            label
+        }
+    };
+    if (kind === 'TextVariable') {
+        const textVariableDefinition = {
+            kind,
+            spec: {
+                ...commonSpec,
+                ...state.textVariableFields
+            }
+        };
+        return textVariableDefinition;
+    }
+    if (kind === 'ListVariable') {
+        const listVariableDefinition = {
+            kind,
+            spec: {
+                ...commonSpec,
+                allow_multiple: state.listVariableFields.allowMultiple,
+                allow_all_value: state.listVariableFields.allowAll,
+                plugin: state.listVariableFields.plugin
+            }
+        };
+        return listVariableDefinition;
+    }
+    throw new Error(`Unknown variable kind: ${kind}`);
+}