[ENHANCEMENT] remove core dependency

barchart/package.json

@@ -27,9 +27,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.54.0-beta.1",
-    "@perses-dev/core": "^0.53.0",
-    "@perses-dev/plugin-system": "^0.54.0-beta.1",
+    "@perses-dev/components": "^0.54.0-beta.3",
+    "@perses-dev/plugin-system": "^0.54.0-beta.3",
+    "@perses-dev/spec": "^0.2.0-beta.2",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",

barchart/src/BarChartBase.tsx

@@ -12,8 +12,14 @@
 // limitations under the License.
 
 import { ReactElement, useMemo } from 'react';
-import { EChart, ModeOption, getFormattedAxis, useChartsTheme } from '@perses-dev/components';
-import { FormatOptions, formatValue } from '@perses-dev/core';
+import {
+  EChart,
+  FormatOptions,
+  ModeOption,
+  formatValue,
+  getFormattedAxis,
+  useChartsTheme,
+} from '@perses-dev/components';
 import { use, EChartsCoreOption } from 'echarts/core';
 import { BarChart as EChartsBarChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';

barchart/src/BarChartOptionsEditorSettings.tsx

@@ -24,6 +24,8 @@ import {
 import {
   FormatControls,
   FormatControlsProps,
+  FormatOptions,
+  isPercentUnit,
   ModeOption,
   ModeSelector,
   ModeSelectorProps,
@@ -34,8 +36,12 @@ import {
   SortSelector,
   SortSelectorProps,
 } from '@perses-dev/components';
-import { CalculationType, DEFAULT_CALCULATION, FormatOptions, isPercentUnit } from '@perses-dev/core';
-import { CalculationSelector, CalculationSelectorProps } from '@perses-dev/plugin-system';
+import {
+  CalculationSelector,
+  CalculationSelectorProps,
+  CalculationType,
+  DEFAULT_CALCULATION,
+} from '@perses-dev/plugin-system';
 import { produce } from 'immer';
 import merge from 'lodash/merge';
 import { MouseEventHandler, ReactElement } from 'react';

barchart/src/BarChartPanel.tsx

@@ -14,8 +14,8 @@
 import { useChartsTheme } from '@perses-dev/components';
 import { Box } from '@mui/material';
 import { ReactElement, useMemo } from 'react';
-import { CalculationType, CalculationsMap, TimeSeriesData } from '@perses-dev/core';
-import { PanelProps } from '@perses-dev/plugin-system';
+import { CalculationsMap, CalculationType, PanelProps } from '@perses-dev/plugin-system';
+import { TimeSeriesData } from '@perses-dev/spec';
 import { BarChartOptions } from './bar-chart-model';
 import { calculatePercentages, sortSeriesData } from './utils';
 import { BarChartBase, BarChartData, StackedBarChartData, StackedBarChartSeries } from './BarChartBase';

barchart/src/bar-chart-model.ts

@@ -11,9 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ModeOption, SortOption } from '@perses-dev/components';
-import { CalculationType, DEFAULT_CALCULATION, Definition, FormatOptions } from '@perses-dev/core';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { FormatOptions, ModeOption, SortOption } from '@perses-dev/components';
+import { CalculationType, DEFAULT_CALCULATION, OptionsEditorProps } from '@perses-dev/plugin-system';
+import { Definition } from '@perses-dev/spec';
 
 export const DEFAULT_FORMAT: FormatOptions = { unit: 'decimal', shortValues: true };
 export const DEFAULT_SORT: SortOption = 'desc';

barchart/src/tresholds.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { StepOptions, ThresholdColorPalette, ThresholdOptions, FormatOptions } from '@perses-dev/core';
+import { FormatOptions, StepOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';
 import zip from 'lodash/zip';
 
 export type GaugeColorStop = [number, string];

clickhouse/package.json

@@ -19,11 +19,12 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.54.0-beta.1",
-    "@perses-dev/core": "^0.53.0",
-    "@perses-dev/dashboards": "^0.54.0-beta.1",
-    "@perses-dev/explore": "^0.54.0-beta.1",
-    "@perses-dev/plugin-system": "^0.54.0-beta.1",
+    "@perses-dev/components": "^0.54.0-beta.3",
+    "@perses-dev/dashboards": "^0.54.0-beta.3",
+    "@perses-dev/spec": "^0.2.0-beta.2",
+    "@perses-dev/explore": "^0.54.0-beta.3",
+    "@perses-dev/plugin-system": "^0.54.0-beta.3",
+    "@perses-dev/client": "^0.54.0-beta.3",
     "@tanstack/react-query": "^4.39.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",

clickhouse/src/datasources/click-house-datasource/click-house-datasource-types.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { HTTPProxy, RequestHeaders } from '@perses-dev/core';
+import { HTTPProxy, RequestHeaders } from '@perses-dev/client';
 import { DatasourceClient } from '@perses-dev/plugin-system';
 
 export interface ClickHouseDatasourceSpec {

clickhouse/src/model/click-house-client.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { RequestHeaders } from '@perses-dev/core';
+import { RequestHeaders } from '@perses-dev/client';
 
 export interface ClickHouseQueryParams {
   query: string;

clickhouse/src/model/click-house-data-types.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { LogData, TimeSeriesData } from '@perses-dev/core';
+import { LogData, TimeSeriesData } from '@perses-dev/spec';
 
 export interface ClickHouseTimeSeriesData extends TimeSeriesData {
   logs?: LogData;

clickhouse/src/queries/click-house-log-query/click-house-log-query-types.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DatasourceSelector } from '@perses-dev/core';
+import { DatasourceSelector } from '@perses-dev/spec';
 
 export interface ClickHouseLogQuerySpec {
   query: string;

clickhouse/src/queries/click-house-log-query/get-click-house-log-data.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { replaceVariables } from '@perses-dev/plugin-system';
-import { LogEntry, LogData } from '@perses-dev/core';
+import { LogData, LogEntry } from '@perses-dev/spec';
 import { ClickHouseClient, ClickHouseQueryResponse } from '../../model/click-house-client';
 import { DEFAULT_DATASOURCE } from '../constants';
 import { ClickHouseLogQuerySpec } from './click-house-log-query-types';

clickhouse/src/queries/click-house-log-query/log-query-plugin-interface.ts

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { AbsoluteTimeRange, UnknownSpec, LogData } from '@perses-dev/core';
 import { DatasourceStore, Plugin, VariableStateMap } from '@perses-dev/plugin-system';
+import { AbsoluteTimeRange, LogData, UnknownSpec } from '@perses-dev/spec';
 
 export interface LogQueryResult {
   logs: LogData;

clickhouse/src/queries/click-house-time-series-query/click-house-query-types.test.ts

@@ -12,11 +12,11 @@
 // limitations under the License.
 
 // TODO: This should be fixed globally in the test setup
-import { DatasourceSpec } from '@perses-dev/core';
 
 jest.mock('echarts/core');
 
 import { TimeSeriesQueryContext } from '@perses-dev/plugin-system';
+import { DatasourceSpec } from '@perses-dev/spec';
 import { ClickHouseDatasource, ClickHouseDatasourceSpec } from '../../datasources';
 import { ClickHouseQueryResponse } from '../../model/click-house-client';
 import { ClickHouseTimeSeriesQuery } from './ClickHouseQuery';

clickhouse/src/queries/click-house-time-series-query/click-house-query-types.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DatasourceSelector } from '@perses-dev/core';
+import { DatasourceSelector } from '@perses-dev/spec';
 
 export interface ClickHouseTimeSeriesQuerySpec {
   query: string;

clickhouse/src/queries/click-house-time-series-query/get-click-house-data.ts

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TimeSeries } from '@perses-dev/core';
 import { TimeSeriesQueryPlugin, replaceVariables } from '@perses-dev/plugin-system';
+import { TimeSeries } from '@perses-dev/spec';
 import { DEFAULT_DATASOURCE } from '../constants';
 import { TimeSeriesEntry } from '../../model/click-house-data-types';
 import { ClickHouseClient, ClickHouseQueryResponse } from '../../model/click-house-client';

datasourcevariable/package.json

@@ -27,9 +27,8 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.54.0-beta.1",
-    "@perses-dev/core": "^0.53.0",
-    "@perses-dev/plugin-system": "^0.54.0-beta.1",
+    "@perses-dev/components": "^0.54.0-beta.3",
+    "@perses-dev/plugin-system": "^0.54.0-beta.3",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",

flamechart/package.json

@@ -30,9 +30,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.54.0-beta.1",
-    "@perses-dev/core": "^0.53.0",
-    "@perses-dev/plugin-system": "^0.54.0-beta.1",
+    "@perses-dev/components": "^0.54.0-beta.3",
+    "@perses-dev/plugin-system": "^0.54.0-beta.3",
+    "@perses-dev/spec": "^0.2.0-beta.2",
     "@tanstack/react-table": "^8.20.5",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",

flamechart/src/components/CustomBreadcrumb.tsx

@@ -18,7 +18,7 @@ import EyeIcon from 'mdi-material-ui/EyeOutline';
 import CloseIcon from 'mdi-material-ui/Close';
 import Chip from '@mui/material/Chip';
 import { emphasize, styled } from '@mui/material/styles';
-import { formatValue } from '@perses-dev/core';
+import { formatValue } from '@perses-dev/components';
 
 export interface CustomBreadcrumbProps {
   totalValue: string;

flamechart/src/components/FlameChart.tsx

@@ -19,12 +19,12 @@ import {
 } from 'echarts';
 import { Stack, Box, Menu, MenuItem, Divider, useTheme } from '@mui/material';
 import { ReactElement, useState, useMemo, MouseEvent } from 'react';
-import { ProfileData } from '@perses-dev/core';
 import { useChartsTheme, EChart, MouseEventsParameters } from '@perses-dev/components';
 import RefreshIcon from 'mdi-material-ui/Refresh';
 import EyeIcon from 'mdi-material-ui/EyeOutline';
 import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
 import { EChartsCoreOption } from 'echarts/core';
+import { ProfileData } from '@perses-dev/spec';
 import { buildSamples, findTotalSampleByName } from '../utils/data-transform';
 import { generateTooltip } from '../utils/tooltip';
 import { FlameChartSample as Sample } from '../utils/data-model';

flamechart/src/components/FlameChartPanel.tsx

@@ -15,8 +15,8 @@ import { TitleComponentOption } from 'echarts';
 import { useChartsTheme } from '@perses-dev/components';
 import { Stack, Typography, SxProps, useMediaQuery, useTheme } from '@mui/material';
 import { FC, useState, useEffect, useMemo } from 'react';
-import { ProfileData, StackTrace } from '@perses-dev/core';
 import { PanelProps } from '@perses-dev/plugin-system';
+import { ProfileData, StackTrace } from '@perses-dev/spec';
 import { FlameChartOptions } from '../flame-chart-model';
 import { filterStackTraceById, getMaxDepth } from '../utils/data-transform';
 import { FlameChart } from './FlameChart';

flamechart/src/components/SeriesChart.tsx

@@ -13,12 +13,12 @@
 
 import { ReactElement, useMemo, useRef } from 'react';
 import { Stack, useTheme } from '@mui/material';
-import { ProfileData, Timeline } from '@perses-dev/core';
 import { useChartsTheme, EChart, ZoomEventData, OnEventsType, enableDataZoom } from '@perses-dev/components';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import type { EChartsCoreOption, LineSeriesOption } from 'echarts';
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { CallbackDataParams } from 'echarts/types/dist/shared';
+import { ProfileData, Timeline } from '@perses-dev/spec';
 import { formatItemValue } from '../utils/format';
 import { getSeriesTooltip } from '../utils/series-tooltip';
 import { SeriesSample } from '../utils/data-model';

flamechart/src/components/TableChart.tsx

@@ -13,9 +13,10 @@
 
 import { ReactElement, useMemo, useState } from 'react';
 import { Stack, useTheme, Link } from '@mui/material';
-import { ProfileData } from '@perses-dev/core';
+
 import { Table, TableColumnConfig } from '@perses-dev/components';
 import { SortingState } from '@tanstack/react-table';
+import { ProfileData } from '@perses-dev/spec';
 import { tableRecursionJson } from '../utils/data-transform';
 import { TableChartSample } from '../utils/data-model';
 import { formatItemValue } from '../utils/format';

flamechart/src/flame-chart-model.ts

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Definition } from '@perses-dev/core';
 import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { Definition } from '@perses-dev/spec';
 
 /**
  * The schema for a FlameChart panel.

flamechart/src/utils/data-transform.test.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { StackTrace } from '@perses-dev/core';
+import { StackTrace } from '@perses-dev/spec';
 import { FlameChartSample as Sample } from './data-model';
 import { filterStackTraceById, buildSamples } from './data-transform';
 import { getSpanColor } from './palette-gen';

flamechart/src/utils/data-transform.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ProfileMetaData, StackTrace } from '@perses-dev/core';
+import { ProfileMetaData, StackTrace } from '@perses-dev/spec';
 import { FlameChartSample as Sample, TableChartSample } from './data-model';
 import { getSpanColor } from './palette-gen';
 import { formatItemValue } from './format';

flamechart/src/utils/format.ts

@@ -11,7 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { msToPrometheusDuration, formatDuration, formatValue } from '@perses-dev/core';
+import { formatValue } from '@perses-dev/components';
+import { convertTimeToDuration, formatDuration } from '@perses-dev/spec';
 
 export function formatNanoDuration(value: number): string {
   // The value to format is in nanoseconds
@@ -20,7 +21,7 @@ export function formatNanoDuration(value: number): string {
   } else if (value < 1_000_000) {
     return formatValue(value / 1_000, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + 'μs';
   } else {
-    return formatDuration(msToPrometheusDuration(value / 1_000_000));
+    return formatDuration(convertTimeToDuration(value / 1_000_000));
   }
 }
 

gaugechart/package.json

@@ -27,9 +27,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.54.0-beta.1",
-    "@perses-dev/core": "^0.53.0",
-    "@perses-dev/plugin-system": "^0.54.0-beta.1",
+    "@perses-dev/components": "^0.54.0-beta.3",
+    "@perses-dev/spec": "^0.2.0-beta.2",
+    "@perses-dev/plugin-system": "^0.54.0-beta.3",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",

gaugechart/src/GaugeChartBase.tsx

@@ -11,8 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { EChart, useChartsTheme, useDeepMemo } from '@perses-dev/components';
-import { formatValue, FormatOptions } from '@perses-dev/core';
+import { EChart, FormatOptions, formatValue, useChartsTheme, useDeepMemo } from '@perses-dev/components';
 import { use, EChartsCoreOption } from 'echarts/core';
 import { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';
 import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';

gaugechart/src/GaugeChartOptionsEditorSettings.tsx

@@ -19,9 +19,9 @@ import {
   OptionsEditorControl,
   OptionsEditorGrid,
   OptionsEditorGroup,
+  ThresholdOptions,
   ThresholdsEditor,
 } from '@perses-dev/components';
-import { ThresholdOptions } from '@perses-dev/core';
 import { CalculationSelector, CalculationSelectorProps } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
 import merge from 'lodash/merge';

gaugechart/src/GaugeChartPanel.tsx

@@ -12,12 +12,12 @@
 // limitations under the License.
 
 import { Box, Skeleton, Stack } from '@mui/material';
-import { useChartsTheme } from '@perses-dev/components';
-import { CalculationsMap, DEFAULT_CALCULATION, FormatOptions, formatValue, TimeSeriesData } from '@perses-dev/core';
-import { PanelProps } from '@perses-dev/plugin-system';
+import { FormatOptions, formatValue, useChartsTheme } from '@perses-dev/components';
+import { CalculationsMap, DEFAULT_CALCULATION, PanelProps } from '@perses-dev/plugin-system';
 import type { GaugeSeriesOption } from 'echarts';
 import merge from 'lodash/merge';
 import { ReactElement, useMemo } from 'react';
+import { TimeSeriesData } from '@perses-dev/spec';
 import {
   DEFAULT_FORMAT,
   DEFAULT_MAX_PERCENT,

gaugechart/src/gauge-chart-model.ts

@@ -11,8 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CalculationType, Definition, ThresholdOptions, FormatOptions } from '@perses-dev/core';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { FormatOptions, ThresholdOptions } from '@perses-dev/components';
+import { CalculationType, OptionsEditorProps } from '@perses-dev/plugin-system';
+import { Definition } from '@perses-dev/spec';
 
 export const DEFAULT_FORMAT: FormatOptions = { unit: 'percent-decimal' };
 export const DEFAULT_MAX_PERCENT = 100;

gaugechart/src/thresholds.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { StepOptions, ThresholdColorPalette, ThresholdOptions, FormatOptions } from '@perses-dev/core';
+import { FormatOptions, StepOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';
 import zip from 'lodash/zip';
 
 export type GaugeColorStop = [number, string];