[change] use perses/spec in shared component

components/package.json

@@ -35,6 +35,7 @@
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^7.23.1",
     "@perses-dev/core": "0.53.0",
+    "@perses-dev/spec": "0.2.0-beta.0",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^4.1.0",

components/src/ContentWithLegend/ContentWithLegend.tsx

@@ -13,7 +13,7 @@
 
 import { ReactElement } from 'react';
 import { Box, useTheme } from '@mui/material';
-import { getLegendSize } from '@perses-dev/core';
+import { getLegendSize } from '@perses-dev/core'; // TODO
 import { Legend } from '../Legend';
 import { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';
 

components/src/ContentWithLegend/model/content-with-legend-model.test.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { createTheme } from '@mui/material';
-import { legendModes, legendSizes } from '@perses-dev/core';
+import { legendModes, legendSizes } from '@perses-dev/core'; // TODO
 import * as table from '../../Table';
 import {
   ContentWithLegendLayoutOpts,

components/src/ContentWithLegend/model/content-with-legend-model.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { Theme } from '@mui/material';
-import { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core';
+import { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core'; //TODO
 import { LegendProps } from '../../Legend';
 import { getTableCellLayout } from '../../Table';
 

components/src/FormEditor/FormActions.tsx

@@ -13,7 +13,7 @@
 
 import { Button, Divider, Stack, StackProps } from '@mui/material';
 import { ReactElement } from 'react';
-import { Action } from '@perses-dev/core';
+import { Action } from '@perses-dev/core'; // TODO the internal permission system of Perses should not be in a shared library
 
 export interface FormActionsProps extends StackProps {
   action: Action;

components/src/FormatControls/FormatControls.test.tsx

@@ -13,7 +13,7 @@
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { FormatOptions } from '@perses-dev/core';
+import { FormatOptions } from '@perses-dev/core'; // TODO
 import { FormatControls } from './FormatControls';
 
 describe('FormatControls', () => {

components/src/FormatControls/FormatControls.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Switch, SwitchProps } from '@mui/material';
-import { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core';
+import { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core'; // TODO
 import { ReactElement } from 'react';
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';

components/src/FormatControls/UnitSelector.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { FormatOptions, UNIT_CONFIG, UnitConfig } from '@perses-dev/core';
+import { FormatOptions, UNIT_CONFIG, UnitConfig } from '@perses-dev/core'; // TODO
 import { ReactElement } from 'react';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
 

components/src/Legend/Legend.tsx

@@ -14,7 +14,7 @@
 import { Box } from '@mui/material';
 import { produce } from 'immer';
 import { ReactElement, ReactNode } from 'react';
-import { getLegendMode } from '@perses-dev/core';
+import { getLegendMode } from '@perses-dev/core'; // TODO
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 import { TableLegend, TableLegendProps } from './TableLegend';

components/src/Legend/legend-model.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { MouseEventHandler } from 'react';
-import { LegendOptionsBase } from '@perses-dev/core';
+import { LegendOptionsBase } from '@perses-dev/core'; // TODO
 
 // This file contains legend-related model code specific to the legend component.
 // See the `core` package for common/shared legend model code and the

components/src/LinksEditor/LinksEditor.tsx

@@ -16,7 +16,7 @@ import { Divider, IconButton, Stack, Typography } from '@mui/material';
 import { Controller, useFieldArray, Control } from 'react-hook-form';
 import PlusIcon from 'mdi-material-ui/Plus';
 import MinusIcon from 'mdi-material-ui/Minus';
-import { PanelEditorValues } from '@perses-dev/core';
+import { PanelEditorValues } from '@perses-dev/spec';
 import { LinkEditorForm } from './LinkEditorForm';
 
 export interface LinksEditorProps extends HTMLAttributes<HTMLDivElement> {

components/src/RefreshIntervalPicker/RefreshIntervalPicker.tsx

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { Box, FormControl, MenuItem, Select } from '@mui/material';
-import { DurationString } from '@perses-dev/core';
+import { DurationString } from '@perses-dev/spec';
 import { ReactElement, useMemo } from 'react';
 import { TimeOption } from '../model';
 

components/src/Table/model/table-model.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { Theme } from '@mui/material';
-import { Link } from '@perses-dev/core';
+import { Link } from '@perses-dev/spec';
 import {
   AccessorKeyColumnDef,
   CellContext,

components/src/ThresholdsEditor/ThresholdInput.tsx

@@ -14,7 +14,7 @@
 import { ReactElement, RefObject, useState } from 'react';
 import { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import { ThresholdOptions } from '@perses-dev/core';
+import { ThresholdOptions } from '@perses-dev/core'; // TODO
 import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
 
 export interface ThresholdInputProps {

components/src/ThresholdsEditor/ThresholdsEditor.test.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ThresholdOptions } from '@perses-dev/core';
+import { ThresholdOptions } from '@perses-dev/core'; // TODO
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { produce } from 'immer';

components/src/ThresholdsEditor/ThresholdsEditor.tsx

@@ -16,7 +16,7 @@ import { produce } from 'immer';
 import { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import PlusIcon from 'mdi-material-ui/Plus';
 import { Stack } from '@mui/system';
-import { ThresholdOptions } from '@perses-dev/core';
+import { ThresholdOptions } from '@perses-dev/core'; // TODO
 import { useChartsTheme } from '../context/ChartsProvider';
 import { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';
 import { InfoTooltip } from '../InfoTooltip';

components/src/TimeRangeSelector/DateTimeRangePicker.tsx

@@ -15,7 +15,7 @@ import { ReactElement, useState } from 'react';
 import { Box, Stack, Typography, Button } from '@mui/material';
 import { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { AbsoluteTimeRange } from '@perses-dev/core';
+import { AbsoluteTimeRange } from '@perses-dev/spec';
 import { TZDate } from '@date-fns/tz';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ErrorAlert } from '../ErrorAlert';

components/src/TimeRangeSelector/TimeRangeSelector.tsx

@@ -14,7 +14,7 @@
 import { Box, MenuItem, Popover, Select, IconButton, TextField } from '@mui/material';
 import Calendar from 'mdi-material-ui/Calendar';
 import EarthIcon from 'mdi-material-ui/Earth';
-import { TimeRangeValue, isRelativeTimeRange, AbsoluteTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
+import { TimeRangeValue, isRelativeTimeRange, AbsoluteTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';
 import { ReactElement, useMemo, useRef, useState } from 'react';
 import { useTimeZone } from '../context';
 import { TimeZoneOption, getTimeZoneOptions } from '../model/timeZoneOption';

components/src/TimeRangeSelector/utils.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { isBefore, isValid } from 'date-fns';
-import { AbsoluteTimeRange, isRelativeTimeRange, TimeRangeValue } from '@perses-dev/core';
+import { AbsoluteTimeRange, isRelativeTimeRange, TimeRangeValue } from '@perses-dev/spec';
 import { formatWithTimeZone } from '../utils';
 
 export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';

components/src/TimeSeriesTooltip/TimeChartTooltip.tsx

@@ -14,7 +14,8 @@
 import { memo, MutableRefObject, useRef, useState } from 'react';
 import { Box, Portal, Stack } from '@mui/material';
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { FormatOptions, TimeSeries } from '@perses-dev/core';
+import { FormatOptions } from '@perses-dev/core'; // TODO
+import { TimeSeries } from '@perses-dev/spec';
 import useResizeObserver from 'use-resize-observer';
 import { TimeChartSeriesMapping } from '../model';
 import { CursorCoordinates, useMousePosition } from './tooltip-model';

components/src/TimeSeriesTooltip/nearby-series.test.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { FormatOptions } from '@perses-dev/core';
+import { FormatOptions } from '@perses-dev/core'; // TODO
 import { EChartsDataFormat } from '../model';
 import { legacyCheckforNearbySeries, getYBuffer, isWithinPercentageRange } from './nearby-series';
 

components/src/TimeSeriesTooltip/nearby-series.ts

@@ -13,7 +13,7 @@
 
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { LineSeriesOption } from 'echarts/charts';
-import { formatValue, TimeSeriesValueTuple, FormatOptions, TimeSeries } from '@perses-dev/core';
+import { formatValue, TimeSeriesValueTuple, FormatOptions, TimeSeries } from '@perses-dev/core'; // TODO
 import { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT, TimeChartSeriesMapping, DatapointInfo } from '../model';
 import { batchDispatchNearbySeriesActions, getPointInGrid, getClosestTimestamp } from '../utils';
 import { CursorCoordinates, CursorData, EMPTY_TOOLTIP_DATA } from './tooltip-model';

components/src/TransformsEditor/TransformEditor.tsx

@@ -27,7 +27,7 @@ import {
   MergeIndexedColumnsTransform,
   MergeSeriesTransform,
   Transform,
-} from '@perses-dev/core';
+} from '@perses-dev/core'; // TODO
 import { ReactElement } from 'react';
 import { TextField } from '../controls';
 

components/src/TransformsEditor/TransformEditorContainer.tsx

@@ -17,7 +17,7 @@ import ChevronDown from 'mdi-material-ui/ChevronDown';
 import EyeOffIcon from 'mdi-material-ui/EyeOffOutline';
 import EyeIcon from 'mdi-material-ui/EyeOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import { Transform, TRANSFORM_TEXT } from '@perses-dev/core';
+import { Transform, TRANSFORM_TEXT } from '@perses-dev/core'; // TODO
 import { ReactElement } from 'react';
 import { TransformEditor, TransformEditorProps } from './TransformEditor';
 

components/src/TransformsEditor/TransformsEditor.test.tsx

@@ -13,7 +13,7 @@
 
 import { render, screen, fireEvent } from '@testing-library/react';
 import { TransformsEditor } from '@perses-dev/components';
-import { Transform } from '@perses-dev/core';
+import { Transform } from '@perses-dev/core'; // TODO
 
 describe('TransformsEditor', () => {
   function renderTableColumnsEditor(value: Transform[], onChange = jest.fn()): void {

components/src/TransformsEditor/TransformsEditor.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Transform } from '@perses-dev/core';
+import { Transform } from '@perses-dev/core'; // TODO
 import { Button, Stack, StackProps } from '@mui/material';
 import { ReactElement, useState } from 'react';
 import AddIcon from 'mdi-material-ui/Plus';

components/src/ValueMappingEditor/ValueMappingEditor.tsx

@@ -24,7 +24,7 @@ import {
 } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import PlusIcon from 'mdi-material-ui/Plus';
-import { ValueMapping } from '@perses-dev/core';
+import { ValueMapping } from '@perses-dev/core'; // TODO
 import { FC } from 'react';
 import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
 

components/src/ValueMappingEditor/ValueMappingsEditor.tsx

@@ -12,10 +12,9 @@
 // limitations under the License.
 
 import { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';
-
 import { FC, useState } from 'react';
 import AddIcon from 'mdi-material-ui/Plus';
-import { ValueMapping } from '@perses-dev/core';
+import { ValueMapping } from '@perses-dev/core'; // TODO
 import { ValueMappingEditor } from './ValueMappingEditor';
 
 export interface ValueMappingsEditorProps {

components/src/model/graph.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TimeSeriesValueTuple } from '@perses-dev/core';
+import { TimeSeriesValueTuple } from '@perses-dev/spec';
 import { LineSeriesOption, BarSeriesOption } from 'echarts/charts';
 import { LegendItem } from '../Legend';
 

components/src/model/theme.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ThresholdColorPalette } from '@perses-dev/core';
+import { ThresholdColorPalette } from '@perses-dev/core'; // TODO
 import type {
   EChartsOption,
   BarSeriesOption,

components/src/model/timeOption.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';
+import { DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/spec';
 import { formatDuration } from 'date-fns';
 
 export interface TimeOption {

components/src/utils/axis.ts

@@ -13,7 +13,7 @@
 
 import merge from 'lodash/merge';
 import type { XAXisComponentOption, YAXisComponentOption } from 'echarts';
-import { formatValue, FormatOptions } from '@perses-dev/core';
+import { formatValue, FormatOptions } from '@perses-dev/core'; // TODO
 
 export interface YAxisConfig {
   format?: FormatOptions;

components/src/utils/chart-actions.test.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';
+import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/spec';
 import { getClosestTimestamp, getClosestTimestampInFullDataset } from './chart-actions';
 
 const TEST_TIME_SERIES_VALUES: TimeSeriesValueTuple[] = [

components/src/utils/chart-actions.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';
+import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/spec';
 import { DatapointInfo, PINNED_CROSSHAIR_SERIES_NAME, TimeChartSeriesMapping } from '../model';
 
 export interface ZoomEventData {

components/src/utils/variable-interpolation.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { VariableValue } from '@perses-dev/core';
+import { VariableValue } from '@perses-dev/spec';
 
 /**
  * Option for a variable with label and value

dashboards/package.json

@@ -32,6 +32,7 @@
     "@perses-dev/components": "0.53.1",
     "@perses-dev/core": "0.53.0",
     "@perses-dev/plugin-system": "0.53.1",
+    "@perses-dev/spec": "0.2.0-beta.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",

dashboards/src/components/Dashboard/Dashboard.tsx

@@ -18,6 +18,7 @@ import { usePanelGroupIds } from '../../context';
 import { GridLayout } from '../GridLayout';
 import { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';
 import { PanelOptions } from '../Panel';
+
 export type DashboardProps = BoxProps & {
   /**
    * Props for `EmptyDashboard` component that will be rendered when the dashboard

dashboards/src/components/DashboardLinks/DashboardLinksEditor.tsx

@@ -32,7 +32,7 @@ import ArrowUp from 'mdi-material-ui/ArrowUp';
 import ArrowDown from 'mdi-material-ui/ArrowDown';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import ChevronUp from 'mdi-material-ui/ChevronUp';
-import { Link } from '@perses-dev/core';
+import { Link } from '@perses-dev/spec';
 import { useImmer } from 'use-immer';
 import { InfoTooltip, LinkEditorForm } from '@perses-dev/components';
 import { useDiscardChangesConfirmationDialog } from '../../context';

dashboards/src/components/DashboardLinks/EditDashboardLinksButton.tsx

@@ -15,7 +15,7 @@ import { ReactElement, useState } from 'react';
 import { Button, ButtonProps } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { Drawer, InfoTooltip } from '@perses-dev/components';
-import { Link } from '@perses-dev/core';
+import { Link } from '@perses-dev/spec';
 import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboardLinks, useDashboardLinksActions } from '../../context';
 import { DashboardLinksEditor } from './DashboardLinksEditor';

dashboards/src/components/Datasources/DatasourceEditor.tsx

@@ -27,7 +27,8 @@ import {
 import AddIcon from 'mdi-material-ui/Plus';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import TrashIcon from 'mdi-material-ui/TrashCan';
-import { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';
+import { Action, DatasourceDefinition } from '@perses-dev/core'; // TODO
+import { DatasourceSpec } from '@perses-dev/spec';
 import { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';
 import { ReactElement, useState } from 'react';
 import { useImmer } from 'use-immer';

dashboards/src/components/Datasources/EditDatasourcesButton.tsx

@@ -15,7 +15,8 @@ import { ReactElement, useState } from 'react';
 import { Button } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { Drawer, InfoTooltip } from '@perses-dev/components';
-import { DashboardResource, DatasourceSpec, EphemeralDashboardResource } from '@perses-dev/core';
+import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core'; // TODO weird that ephemeral dashboard is required here
+import { DatasourceSpec } from '@perses-dev/spec';
 import { useDatasourceStore } from '@perses-dev/plugin-system';
 import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboard } from '../../context';

dashboards/src/components/DownloadButton/serializeDashboard.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
+import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core'; // TODO metadata should not be used, same for ephemeral dashboard
 import { stringify } from 'yaml';
 
 type SerializedDashboard = {

dashboards/src/components/GridLayout/GridItemContent.tsx

@@ -15,7 +15,7 @@ import { Box } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import React, { ReactElement, useMemo, useState } from 'react';
-import { isPanelGroupItemIdEqual, PanelGroupItemId } from '@perses-dev/core';
+import { isPanelGroupItemIdEqual, PanelGroupItemId } from '@perses-dev/core'; // TODO
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { Panel, PanelProps, PanelOptions } from '../Panel';
 import { QueryViewerDialog } from '../QueryViewerDialog';

dashboards/src/components/GridLayout/GridLayout.tsx

@@ -12,7 +12,8 @@
 // limitations under the License.
 import { ReactElement, useState } from 'react';
 import { Layouts, Layout } from 'react-grid-layout';
-import { PanelGroupId, PanelGroupDefinition } from '@perses-dev/core';
+import { PanelGroupDefinition } from '@perses-dev/core'; // TODO what should we do about the PanelGroupDefinition ?
+import { PanelGroupId } from '@perses-dev/spec';
 import { useVariableValues, VariableContext } from '@perses-dev/plugin-system';
 import { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';
 import { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';