npm - @perses-dev/dashboards - Versions diffs - 0.40.0 → 0.40.1 - Mend

@perses-dev/dashboards 0.40.0 → 0.40.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

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

@@ -302,9 +302,7 @@ function VariableEditor(props) {
                                                                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
                                                                         align: "right",
                                                                         sx: {
-                                                                            display: 'flex',
-                                                                            flexDirection: 'row',
-                                                                            flexGrow: 1
+                                                                            whiteSpace: 'nowrap'
                                                                         },
                                                                         children: [
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {

package/dist/components/Variables/VariableEditor.js CHANGED Viewed

@@ -279,9 +279,7 @@ export function VariableEditor(props) {
                                                                     /*#__PURE__*/ _jsxs(TableCell, {
                                                                         align: "right",
                                                                         sx: {
-                                                                            display: 'flex',
-                                                                            flexDirection: 'row',
-                                                                            flexGrow: 1
+                                                                            whiteSpace: 'nowrap'
                                                                         },
                                                                         children: [
                                                                             /*#__PURE__*/ _jsx(IconButton, {

package/dist/components/Variables/VariableEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport {\n Button,\n Stack,\n Box,\n TableContainer,\n TableBody,\n TableRow,\n TableCell as MuiTableCell,\n Table,\n TableHead,\n Switch,\n Typography,\n IconButton,\n Alert,\n styled,\n capitalize,\n Tooltip,\n Accordion,\n AccordionSummary,\n AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport { Action, VariableEditorForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string) {\n return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n const errors = [];\n\n /** Variable names must be unique */\n const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n const uniqueVariableNames = new Set(variableNames);\n if (variableNames.length !== uniqueVariableNames.size) {\n errors.push('Variable names must be unique');\n }\n return {\n errors: errors,\n isValid: errors.length === 0,\n };\n}\n\nexport function VariableEditor(props: {\n variableDefinitions: VariableDefinition[];\n externalVariableDefinitions: ExternalVariableDefinition[];\n builtinVariableDefinitions: BuiltinVariableDefinition[];\n onChange: (variableDefinitions: VariableDefinition[]) => void;\n onCancel: () => void;\n}) {\n const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n const [variableEditIdx, setVariableEditIdx] = useState<number \| null>(null);\n const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n const externalVariableDefinitions = props.externalVariableDefinitions;\n const builtinVariableDefinitions = props.builtinVariableDefinitions;\n const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n const [variableState] = useMemo(() => {\n return [hydrateTemplateVariableStates(variableDefinitions, {}, externalVariableDefinitions)];\n }, [externalVariableDefinitions, variableDefinitions]);\n const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n useDiscardChangesConfirmationDialog();\n const handleCancel = () => {\n if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n openDiscardChangesConfirmationDialog({\n onDiscardChanges: () => {\n closeDiscardChangesConfirmationDialog();\n props.onCancel();\n },\n onCancel: () => {\n closeDiscardChangesConfirmationDialog();\n },\n description:\n 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n });\n } else {\n props.onCancel();\n }\n };\n\n const removeVariable = (index: number) => {\n setVariableDefinitions((draft) => {\n draft.splice(index, 1);\n });\n };\n\n const addVariable = () => {\n setVariableFormAction('create');\n setVariableDefinitions((draft) => {\n draft.push({\n kind: 'TextVariable',\n spec: {\n name: 'NewVariable',\n value: '',\n },\n });\n });\n setVariableEditIdx(variableDefinitions.length);\n };\n\n const editVariable = (index: number) => {\n setVariableFormAction('update');\n setVariableEditIdx(index);\n };\n\n const toggleVariableVisibility = (index: number, visible: boolean) => {\n setVariableDefinitions((draft) => {\n const v = draft[index];\n if (!v) {\n return;\n }\n if (!v.spec.display) {\n v.spec.display = {\n name: v.spec.name,\n hidden: false,\n };\n }\n v.spec.display.hidden = visible === false;\n });\n };\n\n const changeVariableOrder = (index: number, direction: 'up' \| 'down') => {\n setVariableDefinitions((draft) => {\n if (direction === 'up') {\n const prevElement = draft[index - 1];\n const currentElement = draft[index];\n if (index === 0 \|\| !prevElement \|\| !currentElement) {\n return;\n }\n draft[index - 1] = currentElement;\n draft[index] = prevElement;\n } else {\n const nextElement = draft[index + 1];\n const currentElement = draft[index];\n if (index === draft.length - 1 \|\| !nextElement \|\| !currentElement) {\n return;\n }\n draft[index + 1] = currentElement;\n draft[index] = nextElement;\n }\n });\n };\n\n const overrideVariable = (v: VariableDefinition) => {\n setVariableDefinitions((draft) => {\n draft.push(v);\n });\n };\n\n return (\n <>\n {currentEditingVariableDefinition && (\n <VariableEditorForm\n initialVariableDefinition={currentEditingVariableDefinition}\n initialAction={variableFormAction}\n isDraft={true}\n onSave={(definition: VariableDefinition) => {\n setVariableDefinitions((draft) => {\n draft[variableEditIdx] = definition;\n setVariableEditIdx(null);\n });\n }}\n onClose={() => {\n if (variableFormAction === 'create') {\n removeVariable(variableEditIdx);\n }\n setVariableEditIdx(null);\n }}\n />\n )}\n {!currentEditingVariableDefinition && (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Dashboard Variables</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button\n disabled={props.variableDefinitions === variableDefinitions \|\| !validation.isValid}\n variant=\"contained\"\n onClick={() => {\n props.onChange(variableDefinitions);\n }}\n >\n Apply\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Stack spacing={2}>\n <Stack spacing={2}>\n {!validation.isValid &&\n validation.errors.map((error) => (\n <Alert severity=\"error\" key={error}>\n {error}\n </Alert>\n ))}\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {variableDefinitions.map((v, idx) => (\n <TableRow key={v.spec.name}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch\n checked={v.spec.display?.hidden !== true}\n onChange={(e) => {\n toggleVariableVisibility(idx, e.target.checked);\n }}\n />\n </TableCell>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n </TableCell>\n <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\" sx={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>\n <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n <ArrowUp />\n </IconButton>\n <IconButton\n onClick={() => changeVariableOrder(idx, 'down')}\n disabled={idx === variableDefinitions.length - 1}\n >\n <ArrowDown />\n </IconButton>\n <IconButton onClick={() => editVariable(idx)}>\n <PencilIcon />\n </IconButton>\n <IconButton onClick={() => removeVariable(idx)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n Add Variable\n </Button>\n </Box>\n </Stack>\n {externalVariableDefinitions &&\n !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n externalVariableDefinitions.map(\n (extVar) =>\n extVar.definitions.length > 0 && (\n <Accordion\n sx={(theme) => ({\n '.MuiAccordionSummary-root': {\n backgroundColor: theme.palette.background.lighter,\n },\n '.MuiAccordionDetails-root': {\n backgroundColor: theme.palette.background.lighter,\n },\n })}\n >\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls={extVar.source}\n id={extVar.source}\n >\n <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n <>\n {extVar.tooltip ? (\n <Typography variant=\"h2\">\n <InfoTooltip\n title={extVar.tooltip.title \|\| ''}\n description={extVar.tooltip.description \|\| ''}\n >\n <span>{capitalize(extVar.source)} Variables</span>\n </InfoTooltip>\n </Typography>\n ) : (\n <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n )}\n {extVar.editLink && (\n <IconButton href={extVar.editLink} target=\"_blank\">\n <OpenInNewIcon fontSize=\"small\" />\n </IconButton>\n )}\n </>\n </Stack>\n </AccordionSummary>\n <AccordionDetails>\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {extVar.definitions.map((v) => (\n <TableRow key={v.spec.name}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch checked={v.spec.display?.hidden !== true} disabled />\n </TableCell>\n\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n <VariableName\n name={v.spec.name}\n state={variableState.get({ name: v.spec.name, source: extVar.source })}\n />\n </TableCell>\n <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\">\n <Tooltip title=\"Override\">\n <IconButton\n onClick={() => overrideVariable(v)}\n disabled={!!variableState.get({ name: v.spec.name })}\n >\n <ContentDuplicate />\n </IconButton>\n </Tooltip>\n <IconButton disabled>\n <ArrowUp />\n </IconButton>\n <IconButton disabled>\n <ArrowDown />\n </IconButton>\n <IconButton disabled>\n <PencilIcon />\n </IconButton>\n <IconButton disabled>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n </AccordionDetails>\n </Accordion>\n )\n )}\n {builtinVariableDefinitions && (\n <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n )}\n </Stack>\n </Box>\n </>\n )}\n </>\n );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState \| undefined }) {\n const { name, state } = props;\n return (\n <>\n {!state?.overridden && `${name} `}\n {!state?.overridden && state?.overriding && (\n <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n (overriding)\n </Box>\n )}\n {state?.overridden && (\n <>\n <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n (overridden)\n </Box>\n </>\n )}\n </>\n );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","VariableEditorForm","VARIABLE_TYPES","InfoTooltip","useDiscardChangesConfirmationDialog","hydrateTemplateVariableStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","initialAction","isDraft","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","flexDirection","flexGrow","startIcon","every","definitions","extVar","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport {\n Button,\n Stack,\n Box,\n TableContainer,\n TableBody,\n TableRow,\n TableCell as MuiTableCell,\n Table,\n TableHead,\n Switch,\n Typography,\n IconButton,\n Alert,\n styled,\n capitalize,\n Tooltip,\n Accordion,\n AccordionSummary,\n AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport { Action, VariableEditorForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string) {\n return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n const errors = [];\n\n /** Variable names must be unique */\n const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n const uniqueVariableNames = new Set(variableNames);\n if (variableNames.length !== uniqueVariableNames.size) {\n errors.push('Variable names must be unique');\n }\n return {\n errors: errors,\n isValid: errors.length === 0,\n };\n}\n\nexport function VariableEditor(props: {\n variableDefinitions: VariableDefinition[];\n externalVariableDefinitions: ExternalVariableDefinition[];\n builtinVariableDefinitions: BuiltinVariableDefinition[];\n onChange: (variableDefinitions: VariableDefinition[]) => void;\n onCancel: () => void;\n}) {\n const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n const [variableEditIdx, setVariableEditIdx] = useState<number \| null>(null);\n const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n const externalVariableDefinitions = props.externalVariableDefinitions;\n const builtinVariableDefinitions = props.builtinVariableDefinitions;\n const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n const [variableState] = useMemo(() => {\n return [hydrateTemplateVariableStates(variableDefinitions, {}, externalVariableDefinitions)];\n }, [externalVariableDefinitions, variableDefinitions]);\n const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n useDiscardChangesConfirmationDialog();\n const handleCancel = () => {\n if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n openDiscardChangesConfirmationDialog({\n onDiscardChanges: () => {\n closeDiscardChangesConfirmationDialog();\n props.onCancel();\n },\n onCancel: () => {\n closeDiscardChangesConfirmationDialog();\n },\n description:\n 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n });\n } else {\n props.onCancel();\n }\n };\n\n const removeVariable = (index: number) => {\n setVariableDefinitions((draft) => {\n draft.splice(index, 1);\n });\n };\n\n const addVariable = () => {\n setVariableFormAction('create');\n setVariableDefinitions((draft) => {\n draft.push({\n kind: 'TextVariable',\n spec: {\n name: 'NewVariable',\n value: '',\n },\n });\n });\n setVariableEditIdx(variableDefinitions.length);\n };\n\n const editVariable = (index: number) => {\n setVariableFormAction('update');\n setVariableEditIdx(index);\n };\n\n const toggleVariableVisibility = (index: number, visible: boolean) => {\n setVariableDefinitions((draft) => {\n const v = draft[index];\n if (!v) {\n return;\n }\n if (!v.spec.display) {\n v.spec.display = {\n name: v.spec.name,\n hidden: false,\n };\n }\n v.spec.display.hidden = visible === false;\n });\n };\n\n const changeVariableOrder = (index: number, direction: 'up' \| 'down') => {\n setVariableDefinitions((draft) => {\n if (direction === 'up') {\n const prevElement = draft[index - 1];\n const currentElement = draft[index];\n if (index === 0 \|\| !prevElement \|\| !currentElement) {\n return;\n }\n draft[index - 1] = currentElement;\n draft[index] = prevElement;\n } else {\n const nextElement = draft[index + 1];\n const currentElement = draft[index];\n if (index === draft.length - 1 \|\| !nextElement \|\| !currentElement) {\n return;\n }\n draft[index + 1] = currentElement;\n draft[index] = nextElement;\n }\n });\n };\n\n const overrideVariable = (v: VariableDefinition) => {\n setVariableDefinitions((draft) => {\n draft.push(v);\n });\n };\n\n return (\n <>\n {currentEditingVariableDefinition && (\n <VariableEditorForm\n initialVariableDefinition={currentEditingVariableDefinition}\n initialAction={variableFormAction}\n isDraft={true}\n onSave={(definition: VariableDefinition) => {\n setVariableDefinitions((draft) => {\n draft[variableEditIdx] = definition;\n setVariableEditIdx(null);\n });\n }}\n onClose={() => {\n if (variableFormAction === 'create') {\n removeVariable(variableEditIdx);\n }\n setVariableEditIdx(null);\n }}\n />\n )}\n {!currentEditingVariableDefinition && (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Dashboard Variables</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button\n disabled={props.variableDefinitions === variableDefinitions \|\| !validation.isValid}\n variant=\"contained\"\n onClick={() => {\n props.onChange(variableDefinitions);\n }}\n >\n Apply\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Stack spacing={2}>\n <Stack spacing={2}>\n {!validation.isValid &&\n validation.errors.map((error) => (\n <Alert severity=\"error\" key={error}>\n {error}\n </Alert>\n ))}\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {variableDefinitions.map((v, idx) => (\n <TableRow key={v.spec.name}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch\n checked={v.spec.display?.hidden !== true}\n onChange={(e) => {\n toggleVariableVisibility(idx, e.target.checked);\n }}\n />\n </TableCell>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n </TableCell>\n <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n <ArrowUp />\n </IconButton>\n <IconButton\n onClick={() => changeVariableOrder(idx, 'down')}\n disabled={idx === variableDefinitions.length - 1}\n >\n <ArrowDown />\n </IconButton>\n <IconButton onClick={() => editVariable(idx)}>\n <PencilIcon />\n </IconButton>\n <IconButton onClick={() => removeVariable(idx)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n Add Variable\n </Button>\n </Box>\n </Stack>\n {externalVariableDefinitions &&\n !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n externalVariableDefinitions.map(\n (extVar) =>\n extVar.definitions.length > 0 && (\n <Accordion\n sx={(theme) => ({\n '.MuiAccordionSummary-root': {\n backgroundColor: theme.palette.background.lighter,\n },\n '.MuiAccordionDetails-root': {\n backgroundColor: theme.palette.background.lighter,\n },\n })}\n >\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls={extVar.source}\n id={extVar.source}\n >\n <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n <>\n {extVar.tooltip ? (\n <Typography variant=\"h2\">\n <InfoTooltip\n title={extVar.tooltip.title \|\| ''}\n description={extVar.tooltip.description \|\| ''}\n >\n <span>{capitalize(extVar.source)} Variables</span>\n </InfoTooltip>\n </Typography>\n ) : (\n <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n )}\n {extVar.editLink && (\n <IconButton href={extVar.editLink} target=\"_blank\">\n <OpenInNewIcon fontSize=\"small\" />\n </IconButton>\n )}\n </>\n </Stack>\n </AccordionSummary>\n <AccordionDetails>\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {extVar.definitions.map((v) => (\n <TableRow key={v.spec.name}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch checked={v.spec.display?.hidden !== true} disabled />\n </TableCell>\n\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n <VariableName\n name={v.spec.name}\n state={variableState.get({ name: v.spec.name, source: extVar.source })}\n />\n </TableCell>\n <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\">\n <Tooltip title=\"Override\">\n <IconButton\n onClick={() => overrideVariable(v)}\n disabled={!!variableState.get({ name: v.spec.name })}\n >\n <ContentDuplicate />\n </IconButton>\n </Tooltip>\n <IconButton disabled>\n <ArrowUp />\n </IconButton>\n <IconButton disabled>\n <ArrowDown />\n </IconButton>\n <IconButton disabled>\n <PencilIcon />\n </IconButton>\n <IconButton disabled>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n </AccordionDetails>\n </Accordion>\n )\n )}\n {builtinVariableDefinitions && (\n <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n )}\n </Stack>\n </Box>\n </>\n )}\n </>\n );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState \| undefined }) {\n const { name, state } = props;\n return (\n <>\n {!state?.overridden && `${name} `}\n {!state?.overridden && state?.overriding && (\n <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n (overriding)\n </Box>\n )}\n {state?.overridden && (\n <>\n <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n (overridden)\n </Box>\n </>\n )}\n </>\n );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","VariableEditorForm","VARIABLE_TYPES","InfoTooltip","useDiscardChangesConfirmationDialog","hydrateTemplateVariableStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","initialAction","isDraft","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.40.0",
-    "@perses-dev/core": "0.40.0",
-    "@perses-dev/plugin-system": "0.40.0",
+    "@perses-dev/components": "0.40.1",
+    "@perses-dev/core": "0.40.1",
+    "@perses-dev/plugin-system": "0.40.1",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -45,8 +45,8 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.40.0",
-    "@perses-dev/storybook": "0.40.0",
+    "@perses-dev/internal-utils": "0.40.1",
+    "@perses-dev/storybook": "0.40.1",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },