@perses-dev/dashboards 0.41.1 → 0.42.0

package/dist/components/EditJsonDialog/EditJsonDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm disableMetadataEdition={disableMetadataEdition} />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAM1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEE,eAAc,EAAEC,oBAAmB,EAAE,GAAGN;IAEhD,qBACE,MAACH;QAAOU,MAAM,CAAC,CAACF,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK;QAAGC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,KAACd,OAAOe;gBAAOC,SAAS,IAAMP;0BAAuB;;YACpDD,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK,mBAAK,KAACM;gBAAmBV,wBAAwBA;;;;AAG7E,EAAE;AAEF,MAAMU,qBAAqB,CAACX;IAC1B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEG,oBAAmB,EAAE,GAAGN;IAChC,MAAM,EAAEe,aAAY,EAAEC,mBAAkB,EAAE,GAAGjB;IAC7C,MAAM,EAAEkB,UAAS,EAAEC,aAAY,EAAE,GAAGjB;IACpC,MAAM,CAACkB,gBAAgBC,kBAAkB,GAAG1B,SAASuB;IAErD,MAAMI,cAAc,CAACC;QACnBA,EAAEC;QACFL,aAAaC;QACbJ,aAAa;YAAES,cAAcL,eAAeM,KAAKC;QAAS;YACvCP;QAAnBH,mBAAmBG,CAAAA,uCAAAA,eAAeM,KAAKE,6BAApBR,kDAAAA,uCAAuC;QAC1Db;IACF;IAEA,qBACE,MAACT,OAAO+B;QAAKC,UAAUR;;0BACrB,MAACxB,OAAOiC;gBAAQC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjC5B,wCACC,KAACT;wBAAMoC,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,QAAQ;wBAAG;wBAAGC,UAAS;kCAAU;;kCAI/E,KAACxC;wBAAYc,SAAS;kCACpB,cAAA,KAACZ;4BACCuC,WAAU;4BACVC,WAAU;4BACVC,OAAOpB;4BACPqB,UAAU,CAACD,QAAUnB,kBAAkBmB;;;;;0BAI7C,KAAC1C,OAAO4C;0BACN,cAAA,KAAC5C,OAAO6C;oBAAcC,SAAStB;8BAAa;;;;;AAIpD"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm disableMetadataEdition={disableMetadataEdition} />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const { setLocalDatasources } = useDatasourceStore();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    setLocalDatasources(draftDashboard.spec.datasources ?? {});\n    closeEditJsonDialog();\n  };\n\n  const completeDraftDashboard = (dashboard: string | undefined) => {\n    try {\n      const json = JSON.parse(dashboard ?? '{}');\n      setDraftDashboard(json);\n    } catch (e) {\n      // do nothing\n    }\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value: string) => completeDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAM1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEE,eAAc,EAAEC,oBAAmB,EAAE,GAAGN;IAEhD,qBACE,MAACJ;QAAOW,MAAM,CAAC,CAACF,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK;QAAGC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,KAACf,OAAOgB;gBAAOC,SAAS,IAAMP;0BAAuB;;YACpDD,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK,mBAAK,KAACM;gBAAmBV,wBAAwBA;;;;AAG7E,EAAE;AAEF,MAAMU,qBAAqB,CAACX;IAC1B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEG,oBAAmB,EAAE,GAAGN;IAChC,MAAM,EAAEe,aAAY,EAAEC,mBAAkB,EAAE,GAAGjB;IAC7C,MAAM,EAAEkB,UAAS,EAAEC,aAAY,EAAE,GAAGjB;IACpC,MAAM,EAAEkB,oBAAmB,EAAE,GAAGrB;IAChC,MAAM,CAACsB,gBAAgBC,kBAAkB,GAAG5B,SAASwB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC;QACFN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,KAAKC;QAAS;YACvCP;QAAnBJ,mBAAmBI,CAAAA,uCAAAA,eAAeM,KAAKE,6BAApBR,kDAAAA,uCAAuC;YACtCA;QAApBD,oBAAoBC,CAAAA,mCAAAA,eAAeM,KAAKG,yBAApBT,8CAAAA,mCAAmC,CAAC;QACxDd;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,MAAMhB,sBAAAA,uBAAAA,YAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOR,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAAC3B,OAAOsC;QAAKC,UAAUb;;0BACrB,MAAC1B,OAAOwC;gBAAQC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjClC,wCACC,KAACV;wBAAM2C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,QAAQ;wBAAG;wBAAGC,UAAS;kCAAU;;kCAI/E,KAAC/C;wBAAYe,SAAS;kCACpB,cAAA,KAACb;4BACC8C,WAAU;4BACVC,WAAU;4BACVC,OAAOzB;4BACP0B,UAAU,CAACD,QAAkBf,uBAAuBe;;;;;0BAI1D,KAACjD,OAAOmD;0BACN,cAAA,KAACnD,OAAOoD;oBAAcC,SAAS3B;8BAAa;;;;;AAIpD"}

package/dist/components/PanelDrawer/PanelEditorForm.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Action } from '@perses-dev/plugin-system';
+import { Action } from '@perses-dev/core';
 import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAIL,MAAM,EAGP,MAAM,2BAA2B,CAAC;AAInC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAKvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuN1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,MAAM,EAAmB,MAAM,kBAAkB,CAAC;AAY3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAKvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAwN1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, getSubmitText } from '@perses-dev/plugin-system';
@@ -78,7 +78,8 @@ export function PanelEditorForm(props) {
             onClose();
         }
     }
-    const handlePanelDefinitionChange = (nextPanelDef)=>{
+    const handlePanelDefinitionChange = (nextPanelDefStr)=>{
+        const nextPanelDef = JSON.parse(nextPanelDefStr);
         const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
         if (panelDefinition.spec.plugin.kind !== pluginKind && JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)) {

package/dist/components/PanelDrawer/PanelEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 React, { useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  Action,\n  getTitleAction,\n  getSubmitText,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { panelEditorValidationSchema, PanelEditorValidationType } from '../../validation';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const {\n    initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId },\n    initialAction,\n    onSave,\n    onClose,\n  } = props;\n  const panelGroups = useListPanelGroups();\n  const [groupId, setGroupId] = useState(initialGroupId);\n  const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialPanelDef);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind: plugin.kind, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin(plugin);\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const form = useForm<PanelEditorValidationType>({\n    resolver: zodResolver(panelEditorValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: initialPanelDef.spec.display.name,\n      groupId: initialGroupId,\n      description: initialPanelDef.spec.display.description,\n      type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,\n    },\n  });\n\n  const processForm: SubmitHandler<PanelEditorValidationType> = () => {\n    const values: PanelEditorValues = { groupId, panelDefinition };\n    onSave(values);\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel() {\n    if (\n      JSON.stringify({ groupId: initialGroupId, panelDefinition: initialPanelDef }) !==\n      JSON.stringify({ groupId, panelDefinition })\n    ) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDef: PanelDefinition) => {\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  return (\n    <FormProvider {...form}>\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\">{titleAction} Panel</Typography>\n        <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n          <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n            {submitText}\n          </Button>\n          <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n        <Grid container spacing={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setName(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"groupId\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Group\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setGroupId(+event.target.value);\n                  }}\n                >\n                  {panelGroups.map((panelGroup, index) => (\n                    <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                      {panelGroup.title ?? `Group ${index + 1}`}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setDescription(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"type\"\n              render={({ field, fieldState }) => (\n                <PluginKindSelect\n                  {...field}\n                  pluginType=\"Panel\"\n                  required\n                  fullWidth\n                  label=\"Type\"\n                  disabled={pluginEditor.isLoading}\n                  error={!!pluginEditor.error || !!fieldState.error}\n                  helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    pluginEditor.onKindChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Typography variant=\"h4\" marginBottom={1}>\n              Preview\n            </Typography>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelPreview panelDefinition={panelDefinition} />\n            </ErrorBoundary>\n          </Grid>\n          <Grid item xs={12}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelSpecEditor\n                panelDefinition={panelDefinition}\n                onJSONChange={handlePanelDefinitionChange}\n                onQueriesChange={(queries) => {\n                  setQueries(queries);\n                }}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Grid>\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["React","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","Controller","FormProvider","useForm","zodResolver","useListPanelGroups","panelEditorValidationSchema","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","panelDefinition","initialPanelDef","groupId","initialGroupId","initialAction","onSave","onClose","panelGroups","setGroupId","setName","setDescription","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","pluginEditor","pluginType","value","kind","onChange","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","form","resolver","mode","defaultValues","name","display","description","type","pendingKind","processForm","values","handleCancel","JSON","stringify","handlePanelDefinitionChange","nextPanelDef","pluginKind","pluginSpec","rememberCurrentSpecState","panelGroup","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","handleSubmit","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","required","fullWidth","label","error","helperText","message","event","target","select","map","index","title","isLoading","onKindChange","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { panelEditorValidationSchema, PanelEditorValidationType } from '../../validation';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const {\n    initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId },\n    initialAction,\n    onSave,\n    onClose,\n  } = props;\n  const panelGroups = useListPanelGroups();\n  const [groupId, setGroupId] = useState(initialGroupId);\n  const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialPanelDef);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind: plugin.kind, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin(plugin);\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const form = useForm<PanelEditorValidationType>({\n    resolver: zodResolver(panelEditorValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: initialPanelDef.spec.display.name,\n      groupId: initialGroupId,\n      description: initialPanelDef.spec.display.description,\n      type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,\n    },\n  });\n\n  const processForm: SubmitHandler<PanelEditorValidationType> = () => {\n    const values: PanelEditorValues = { groupId, panelDefinition };\n    onSave(values);\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel() {\n    if (\n      JSON.stringify({ groupId: initialGroupId, panelDefinition: initialPanelDef }) !==\n      JSON.stringify({ groupId, panelDefinition })\n    ) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string) => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  return (\n    <FormProvider {...form}>\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\">{titleAction} Panel</Typography>\n        <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n          <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n            {submitText}\n          </Button>\n          <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n        <Grid container spacing={2}>\n          <Grid item xs={8}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setName(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"groupId\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  select\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Group\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setGroupId(+event.target.value);\n                  }}\n                >\n                  {panelGroups.map((panelGroup, index) => (\n                    <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                      {panelGroup.title ?? `Group ${index + 1}`}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  label=\"Description\"\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setDescription(event.target.value);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <Controller\n              name=\"type\"\n              render={({ field, fieldState }) => (\n                <PluginKindSelect\n                  {...field}\n                  pluginType=\"Panel\"\n                  required\n                  fullWidth\n                  label=\"Type\"\n                  disabled={pluginEditor.isLoading}\n                  error={!!pluginEditor.error || !!fieldState.error}\n                  helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    pluginEditor.onKindChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Typography variant=\"h4\" marginBottom={1}>\n              Preview\n            </Typography>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelPreview panelDefinition={panelDefinition} />\n            </ErrorBoundary>\n          </Grid>\n          <Grid item xs={12}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelSpecEditor\n                panelDefinition={panelDefinition}\n                onJSONChange={handlePanelDefinitionChange}\n                onQueriesChange={(queries) => {\n                  setQueries(queries);\n                }}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Grid>\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","Controller","FormProvider","useForm","zodResolver","useListPanelGroups","panelEditorValidationSchema","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","panelDefinition","initialPanelDef","groupId","initialGroupId","initialAction","onSave","onClose","panelGroups","setGroupId","setName","setDescription","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","pluginEditor","pluginType","value","kind","onChange","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","form","resolver","mode","defaultValues","name","display","description","type","pendingKind","processForm","values","handleCancel","JSON","stringify","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","panelGroup","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","handleSubmit","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","required","fullWidth","label","error","helperText","message","event","target","select","map","index","title","isLoading","onKindChange","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/PanelDrawer/index.d.ts

@@ -1,2 +1,3 @@
 export * from './PanelDrawer';
+export * from './PanelPreview';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/PanelDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/components/PanelDrawer/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './PanelDrawer';
+export * from './PanelPreview';
 
 //# sourceMappingURL=index.js.map

package/dist/components/PanelDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/index.ts"],"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\nexport * from './PanelDrawer';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,gBAAgB"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/index.ts"],"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\nexport * from './PanelDrawer';\nexport * from './PanelPreview';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB"}

package/dist/components/QuerySummaryTable/QuerySummaryTable.js

@@ -17,7 +17,7 @@ import { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@
 const TABLE_MAX_WIDTH = 1000;
 export function QuerySummaryTable(props) {
     const { showTotalQueries =true  } = props;
-    const datasourcClient = useDatasourceClient({
+    const datasourceClient = useDatasourceClient({
         kind: 'PrometheusDatasource'
     });
     const { absoluteTimeRange  } = useTimeRange();
@@ -27,7 +27,7 @@ export function QuerySummaryTable(props) {
     const activeQueries = queries.filter((query)=>query.state.status === 'loading');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = useActiveTimeSeriesQueries();
-    if (datasourcClient.isLoading === true) {
+    if (datasourceClient.isLoading === true) {
         return null;
     }
     const warnings = [];

package/dist/components/QuerySummaryTable/QuerySummaryTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps) {\n  const { showTotalQueries = true } = props;\n  const datasourcClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourcClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourcClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps) {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}

package/dist/components/Variables/TemplateVariable.d.ts

@@ -11,7 +11,7 @@ export declare function useListVariableState(spec: ListVariableSpec<UnknownSpec>
     value: VariableValue | undefined;
     loading: boolean;
     options: VariableOption[] | undefined;
-    selectedValue: VariableValue;
+    selectedOptions: VariableOption | VariableOption[];
     viewOptions: VariableOption[];
 };
 export {};

package/dist/components/Variables/TemplateVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAGL,gBAAgB,EAEhB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,qBAAqB,eAWvE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,SAAS,EAC/C,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,aAAa,EAAE,aAAa,CAAC;IAE7B,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CAqDA"}
+{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAGL,gBAAgB,EAEhB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,qBAAqB,eAWvE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,SAAS,EAC/C,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,eAAe,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IAEnD,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CA2FA"}

package/dist/components/Variables/TemplateVariable.js

@@ -10,12 +10,23 @@
 // 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.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';
+import { LinearProgress, TextField, Autocomplete, Popper } from '@mui/material';
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
 import { useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useTemplateVariable, useTemplateVariableActions } from '../../context';
+function variableOptionToVariableValue(options) {
+    if (options === null) {
+        return null;
+    }
+    if (Array.isArray(options)) {
+        return options.map((v)=>{
+            return v.value;
+        });
+    }
+    return options.value;
+}
 export function TemplateVariable({ name , source  }) {
     var _ctx_definition;
     const ctx = useTemplateVariable(name, source);
@@ -42,6 +53,7 @@ export function TemplateVariable({ name , source  }) {
 export function useListVariableState(spec, state, variablesOptionsQuery) {
     const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
     const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
+    const sort = spec === null || spec === void 0 ? void 0 : spec.sort;
     const loading = useMemo(()=>variablesOptionsQuery.isFetching || false, [
         variablesOptionsQuery
     ]);
@@ -53,10 +65,34 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
             value
         ] : [];
     }
-    const viewOptions = useMemo(()=>{
-        let computedOptions = options ? [
+    // Sort the provided list of options according to the method defined
+    const sortedOptions = useMemo(()=>{
+        const opts = options ? [
             ...options
         ] : [];
+        if (!sort || sort === 'none') return opts;
+        switch(sort){
+            case 'alphabetical-asc':
+                return opts.sort((a, b)=>a.label > b.label ? 1 : -1);
+            case 'alphabetical-desc':
+                return opts.sort((a, b)=>a.label > b.label ? -1 : 1);
+            case 'numerical-asc':
+                return opts.sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
+            case 'numerical-desc':
+                return opts.sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
+            case 'alphabetical-ci-asc':
+                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
+            case 'alphabetical-ci-desc':
+                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
+            default:
+                return opts;
+        }
+    }, [
+        options,
+        sort
+    ]);
+    const viewOptions = useMemo(()=>{
+        let computedOptions = sortedOptions;
         // Add the all value if it's allowed
         if (allowAllValue) {
             computedOptions = [
@@ -69,8 +105,8 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
         }
         return computedOptions;
     }, [
-        options,
-        allowAllValue
+        allowAllValue,
+        sortedOptions
     ]);
     const valueIsInOptions = useMemo(()=>Boolean(viewOptions.find((v)=>{
             if (allowMultiple) {
@@ -101,23 +137,49 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
         allowMultiple,
         allowAllValue
     ]);
-    // Once we computed value, we set it as the selected one, if it is available in the options
-    const selectedValue = value && valueIsInOptions ? value : allowMultiple ? [] : '';
+    const selectedOptions = useMemo(()=>{
+        // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not
+        // an array, hence this conditional
+        if (Array.isArray(value)) {
+            return viewOptions.filter((o)=>{
+                return value === null || value === void 0 ? void 0 : value.includes(o.value);
+            });
+        } else {
+            var _viewOptions_find;
+            return (_viewOptions_find = viewOptions.find((o)=>{
+                return value === o.value;
+            })) !== null && _viewOptions_find !== void 0 ? _viewOptions_find : {
+                value: '',
+                label: ''
+            };
+        }
+    }, [
+        value,
+        viewOptions
+    ]);
     return {
         value,
         loading,
         options,
-        selectedValue,
+        selectedOptions,
         viewOptions
     };
 }
+const StyledPopper = (props)=>/*#__PURE__*/ _jsx(Popper, {
+        ...props,
+        sx: {
+            minWidth: 'fit-content'
+        },
+        placement: "bottom-start"
+    });
 function ListVariable({ name , source  }) {
     var _definition_spec_display;
     const ctx = useTemplateVariable(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = useListVariablePluginValues(definition);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = useTemplateVariableActions();
-    const { selectedValue , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    const { selectedOptions , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    const [inputValue, setInputValue] = useState('');
     var _definition_spec_display_name;
     const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
@@ -153,51 +215,72 @@ function ListVariable({ name , source  }) {
         options,
         source
     ]);
-    return /*#__PURE__*/ _jsx(Box, {
-        display: 'flex',
-        children: /*#__PURE__*/ _jsxs(FormControl, {
-            fullWidth: true,
-            children: [
-                /*#__PURE__*/ _jsx(InputLabel, {
-                    id: name,
-                    children: title
-                }),
-                /*#__PURE__*/ _jsxs(Select, {
-                    id: name,
-                    title: selectedValue,
-                    label: title,
-                    value: selectedValue,
-                    onChange: (e)=>{
-                        // Must be selected
-                        if (e.target.value === null || e.target.value.length === 0) {
-                            if (allowAllValue) {
-                                setVariableValue(name, DEFAULT_ALL_VALUE, source);
-                            }
-                            return;
+    const LETTER_HSIZE = 8; // approximation
+    const ARROW_OFFSET = 40;
+    const MIN_INPUT_WIDTH = 120;
+    const MAX_INPUT_WIDTH = 500;
+    const [inputWidth, setInputWidth] = useState(MIN_INPUT_WIDTH);
+    const handleInputResize = (newInputValue)=>{
+        const newInputValueSize = (newInputValue.length + 1) * LETTER_HSIZE + ARROW_OFFSET;
+        if (newInputValueSize < MIN_INPUT_WIDTH) {
+            setInputWidth(MIN_INPUT_WIDTH);
+        } else if (newInputValueSize > MAX_INPUT_WIDTH) {
+            setInputWidth(MAX_INPUT_WIDTH);
+        } else {
+            setInputWidth(newInputValueSize);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                disablePortal: true,
+                disableCloseOnSelect: allowMultiple,
+                multiple: allowMultiple,
+                fullWidth: true,
+                limitTags: 3,
+                size: "small",
+                disableClearable: true,
+                PopperComponent: StyledPopper,
+                renderInput: (params)=>{
+                    return allowMultiple ? /*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        label: title
+                    }) : /*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        label: title,
+                        style: {
+                            width: `${inputWidth}px`
                         }
-                        setVariableValue(name, e.target.value, source);
+                    });
+                },
+                sx: {
+                    '& .MuiInputBase-root': {
+                        minHeight: '38px'
                     },
-                    multiple: allowMultiple,
-                    children: [
-                        loading && /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "loading",
-                            disabled: true,
-                            children: "Loading"
-                        }),
-                        viewOptions.length === 0 && /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "empty",
-                            disabled: true,
-                            children: "No options"
-                        }),
-                        viewOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                value: option.value,
-                                children: option.label
-                            }, option.value))
-                    ]
-                }),
-                loading && /*#__PURE__*/ _jsx(LinearProgress, {})
-            ]
-        })
+                    '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+                        paddingY: '5px',
+                        paddingLeft: '5px'
+                    }
+                },
+                value: selectedOptions,
+                onChange: (_, value)=>{
+                    if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
+                        setVariableValue(name, DEFAULT_ALL_VALUE, source);
+                    } else {
+                        setVariableValue(name, variableOptionToVariableValue(value), source);
+                    }
+                },
+                inputValue: inputValue,
+                onInputChange: (_, newInputValue)=>{
+                    setInputValue(newInputValue);
+                    if (!allowMultiple) {
+                        handleInputResize(newInputValue);
+                    }
+                },
+                options: viewOptions
+            }),
+            loading && /*#__PURE__*/ _jsx(LinearProgress, {})
+        ]
     });
 }
 function TextVariable({ name , source  }) {
@@ -224,6 +307,11 @@ function TextVariable({ name , source  }) {
         label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
         InputProps: {
             readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
+        },
+        sx: {
+            '& .MuiInputBase-root': {
+                minHeight: '38px'
+            }
         }
     });
 }