@parca/profile 0.19.81 → 0.19.82

package/src/hooks/useLabels.ts

@@ -0,0 +1,121 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
+import {useGrpcMetadata} from '@parca/components';
+import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
+
+import useGrpcQuery from '../useGrpcQuery';
+
+export interface ILabelValuesResult {
+  response: string[];
+  error?: Error;
+}
+
+interface UseLabelValues {
+  result: ILabelValuesResult;
+  loading: boolean;
+  refetch: () => Promise<void>;
+}
+
+export interface ILabelNamesResult {
+  response?: LabelsResponse;
+  error?: Error;
+}
+
+interface UseLabelNames {
+  result: ILabelNamesResult;
+  loading: boolean;
+  refetch: () => Promise<void>;
+}
+
+export const useLabelNames = (
+  client: QueryServiceClient,
+  profileType: string,
+  start?: number,
+  end?: number,
+  match?: string[]
+): UseLabelNames => {
+  const metadata = useGrpcMetadata();
+
+  const {data, isLoading, error, refetch} = useGrpcQuery<LabelsResponse>({
+    key: ['labelNames', profileType, match?.join(','), start, end],
+    queryFn: async signal => {
+      const request: LabelsRequest = {match: match !== undefined ? match : []};
+      if (start !== undefined && end !== undefined) {
+        request.start = millisToProtoTimestamp(start);
+        request.end = millisToProtoTimestamp(end);
+      }
+      if (profileType !== undefined) {
+        request.profileType = profileType;
+      }
+      const {response} = await client.labels(request, {meta: metadata, abort: signal});
+      return response;
+    },
+    options: {
+      enabled: profileType !== undefined && profileType !== '',
+      keepPreviousData: false,
+    },
+  });
+
+  console.log('Label names query result:', {data, error, isLoading});
+
+  return {
+    result: {response: data, error: error as Error},
+    loading: isLoading,
+    refetch: async () => {
+      await refetch();
+    },
+  };
+};
+
+export const useLabelValues = (
+  client: QueryServiceClient,
+  labelName: string,
+  profileType: string,
+  start?: number,
+  end?: number
+): UseLabelValues => {
+  const metadata = useGrpcMetadata();
+
+  const {data, isLoading, error, refetch} = useGrpcQuery<string[]>({
+    key: ['labelValues', labelName, profileType, start, end],
+    queryFn: async signal => {
+      const request: ValuesRequest = {labelName, match: [], profileType};
+      if (start !== undefined && end !== undefined) {
+        request.start = millisToProtoTimestamp(start);
+        request.end = millisToProtoTimestamp(end);
+      }
+      const {response} = await client.values(request, {meta: metadata, abort: signal});
+      return sanitizeLabelValue(response.labelValues);
+    },
+    options: {
+      enabled:
+        profileType !== undefined &&
+        profileType !== '' &&
+        labelName !== undefined &&
+        labelName !== '',
+      keepPreviousData: false,
+    },
+  });
+
+  console.log('Label values query result:', {data, error, isLoading, labelName});
+
+  return {
+    result: {response: data ?? [], error: error as Error},
+    loading: isLoading,
+    refetch: async () => {
+      await refetch();
+    },
+  };
+};

package/src/hooks/useQueryState.ts

@@ -58,6 +58,12 @@ interface UseQueryStateReturn {
 
   // Loading state for sumBy computation
   sumByLoading: boolean;
+
+  // draft parsed query
+  draftParsedQuery: Query | null;
+
+  // parsed query
+  parsedQuery: Query | null;
 }
 
 export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryStateReturn => {
@@ -390,6 +396,22 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]
   );
 
+  const draftParsedQuery = useMemo(() => {
+    try {
+      return Query.parse(draftSelection.expression ?? '');
+    } catch {
+      return Query.parse('');
+    }
+  }, [draftSelection.expression]);
+
+  const parsedQuery = useMemo(() => {
+    try {
+      return Query.parse(querySelection.expression ?? '');
+    } catch {
+      return Query.parse('');
+    }
+  }, [querySelection.expression]);
+
   return {
     // Current committed state
     querySelection,
@@ -414,5 +436,8 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
 
     // Loading state
     sumByLoading: sumBySelectionLoading,
+
+    draftParsedQuery,
+    parsedQuery,
   };
 };

package/src/index.tsx

@@ -13,11 +13,21 @@
 
 import type {ParamPreferences} from '@parca/components';
 
-import {useLabelNames} from './MatchersInput';
+import MetricsGraph, {type ContextMenuItemOrSubmenu, type Series} from './MetricsGraph';
 import ProfileExplorer from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
-import SelectWithRefresh from './SelectWithRefresh';
+import {SelectWithRefresh} from './SelectWithRefresh';
 import CustomSelect from './SimpleMatchers/Select';
+import {
+  LabelsQueryProvider,
+  useLabelsQueryProvider,
+  type LabelsQueryProviderContextType,
+} from './contexts/LabelsQueryProvider';
+import {UnifiedLabelsProvider, useUnifiedLabels} from './contexts/UnifiedLabelsContext';
+import {useLabelNames} from './hooks/useLabels';
+import {useQueryState} from './hooks/useQueryState';
+
+export {useMetricsGraphDimensions} from './MetricsGraph/useMetricsGraphDimensions';
 
 export * from './ProfileFlameGraph';
 export * from './ProfileSource';
@@ -32,6 +42,7 @@ export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
 export * from './useSumBy';
+export {QueryControls} from './QueryControls';
 
 export {default as ProfileFilters} from './ProfileView/components/ProfileFilters';
 export {useProfileFiltersUrlState} from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
@@ -43,4 +54,19 @@ export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences = {
   },
 };
 
-export {ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames};
+export {
+  ProfileExplorer,
+  ProfileTypeSelector,
+  CustomSelect,
+  SelectWithRefresh,
+  useLabelNames,
+  MetricsGraph,
+  type ContextMenuItemOrSubmenu,
+  type Series,
+  LabelsQueryProvider,
+  useLabelsQueryProvider,
+  UnifiedLabelsProvider,
+  useUnifiedLabels,
+  useQueryState,
+  type LabelsQueryProviderContextType,
+};

package/src/useSumBy.ts

@@ -17,7 +17,7 @@ import {QueryServiceClient} from '@parca/client';
 import {DateTimeRange} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 
-import {useLabelNames} from './MatchersInput/index';
+import {useLabelNames} from './hooks/useLabels';
 
 export const DEFAULT_EMPTY_SUM_BY: string[] = [];
 

package/dist/MetricsGraph/UtilizationMetrics/Throughput.d.ts

@@ -1,29 +0,0 @@
-import { DateTimeRange } from '@parca/components';
-import { type UtilizationMetrics as MetricSeries } from '../../ProfileSelector';
-interface CommonProps {
-    transmitData: MetricSeries[];
-    receiveData: MetricSeries[];
-    addLabelMatcher: (labels: {
-        key: string;
-        value: string;
-    } | Array<{
-        key: string;
-        value: string;
-    }>) => void;
-    setTimeRange: (range: DateTimeRange) => void;
-    name: string;
-    humanReadableName: string;
-    from: number;
-    to: number;
-    selectedSeries?: Array<{
-        key: string;
-        value: string;
-    }>;
-    onSeriesClick?: (name: string, seriesIndex: number) => void;
-}
-type Props = CommonProps & {
-    utilizationMetricsLoading?: boolean;
-};
-declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSeriesClick, }: Props) => JSX.Element;
-export default AreaChart;
-//# sourceMappingURL=Throughput.d.ts.map

package/dist/MetricsGraph/UtilizationMetrics/Throughput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAiB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D;AAUD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAoRF,QAAA,MAAM,SAAS,GAAI,4JAYhB,KAAK,KAAG,GAAG,CAAC,OA8Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/Throughput.js

@@ -1,175 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2022 The Parca Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-import { useMemo } from 'react';
-import { Icon } from '@iconify/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
-import { formatDate, timePattern, valueFormatter } from '@parca/utilities';
-import MetricsGraph from '../index';
-import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
-const transformUtilizationLabels = (label) => {
-    return label.replace('attributes.', '').replace('attributes_resource.', '');
-};
-const createThroughputContextMenuItems = (addLabelMatcher, transmitData, receiveData) => {
-    const allData = [...transmitData, ...receiveData];
-    return [
-        {
-            id: 'focus-on-single-series',
-            label: 'Focus only on this series',
-            icon: 'ph:star',
-            onClick: (closestPoint, _series) => {
-                if (closestPoint != null &&
-                    allData.length > 0 &&
-                    allData[closestPoint.seriesIndex] != null) {
-                    const originalSeriesData = allData[closestPoint.seriesIndex];
-                    if (originalSeriesData.labelset?.labels != null) {
-                        const labels = originalSeriesData.labelset.labels.filter(label => label.name !== '__name__');
-                        const labelsToAdd = labels.map(label => ({
-                            key: label.name,
-                            value: label.value,
-                        }));
-                        addLabelMatcher(labelsToAdd);
-                    }
-                }
-            },
-        },
-        {
-            id: 'add-to-query',
-            label: 'Add to query',
-            icon: 'material-symbols:add',
-            createDynamicItems: (closestPoint, _series) => {
-                if (closestPoint == null ||
-                    allData.length === 0 ||
-                    allData[closestPoint.seriesIndex] == null) {
-                    return [
-                        {
-                            id: 'no-labels-available',
-                            label: 'No labels available',
-                            icon: 'ph:warning',
-                            disabled: () => true,
-                            onClick: () => { }, // No-op for disabled item
-                        },
-                    ];
-                }
-                const originalSeriesData = allData[closestPoint.seriesIndex];
-                if (originalSeriesData.labelset?.labels == null) {
-                    return [
-                        {
-                            id: 'no-labels-available',
-                            label: 'No labels available',
-                            icon: 'ph:warning',
-                            disabled: () => true,
-                            onClick: () => { }, // No-op for disabled item
-                        },
-                    ];
-                }
-                const labels = originalSeriesData.labelset.labels.filter(label => label.name !== '__name__');
-                return labels.map(label => ({
-                    id: `add-label-${label.name}`,
-                    label: (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${transformUtilizationLabels(label.name)}="${label.value}"` })),
-                    onClick: () => {
-                        addLabelMatcher({
-                            key: label.name,
-                            value: label.value,
-                        });
-                    },
-                }));
-            },
-        },
-    ];
-};
-function transformToSeries(data, isReceive = false) {
-    const series = data.reduce(function (agg, s) {
-        if (s.labelset !== undefined) {
-            const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
-            agg.push({
-                metric,
-                values: s.samples.reduce(function (agg, d) {
-                    if (d.timestamp !== undefined && d.value !== undefined) {
-                        // Multiply receive values by -1 to display below zero
-                        const value = isReceive ? -1 * d.value : d.value;
-                        agg.push([d.timestamp, value]);
-                    }
-                    return agg;
-                }, []),
-                labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
-                isReceive,
-                isSelected: s.isSelected,
-            });
-        }
-        return agg;
-    }, []);
-    // Sort values by timestamp for each series
-    return series.map(series => ({
-        ...series,
-        values: series.values.sort((a, b) => a[0] - b[0]),
-    }));
-}
-function transformNetworkSeriesToSeries(transmitData, receiveData) {
-    const transmitSeries = transformToSeries(transmitData);
-    const receiveSeries = transformToSeries(receiveData, true);
-    const allSeries = [...transmitSeries, ...receiveSeries];
-    return allSeries.map(networkSeries => {
-        const labels = networkSeries.metric ?? [];
-        const sortedLabels = labels
-            .filter(label => label.name !== '__name__')
-            .sort((a, b) => a.name.localeCompare(b.name));
-        const labelString = sortedLabels.map(label => `${label.name}=${label.value}`).join(',');
-        const id = (networkSeries.isReceive === true ? 'receive-' : 'transmit-') +
-            (labelString !== '' ? labelString : 'default');
-        return {
-            id,
-            values: networkSeries.values.map(([timestamp, value]) => [
-                timestamp,
-                value,
-            ]),
-            highlighted: networkSeries.isSelected ?? false,
-        };
-    });
-}
-const RawAreaChart = ({ transmitData, receiveData, transformedData, addLabelMatcher: _addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, selectedSeries: _selectedSeries, onSeriesClick, contextMenuItems, }) => {
-    const { timezone } = useParcaContext();
-    // Compute original series data for rich tooltip
-    const allOriginalData = useMemo(() => [...transmitData, ...receiveData], [transmitData, receiveData]);
-    return (_jsx(MetricsGraph, { data: transformedData, from: from, to: to, setTimeRange: setTimeRange, onSampleClick: closestPoint => {
-            if (onSeriesClick != null) {
-                onSeriesClick(humanReadableName, closestPoint.seriesIndex);
-            }
-        }, yAxisLabel: humanReadableName, yAxisUnit: "bytes_per_second", width: width, height: height, margin: margin, contextMenuItems: contextMenuItems, renderTooltipContent: (seriesIndex, pointIndex) => {
-            if (allOriginalData?.[seriesIndex]?.samples?.[pointIndex] != null) {
-                const originalSeriesData = allOriginalData[seriesIndex];
-                const originalPoint = allOriginalData[seriesIndex].samples[pointIndex];
-                const labels = originalSeriesData.labelset?.labels ?? [];
-                const nameLabel = labels.find(e => e.name === '__name__');
-                const highlightedNameLabel = nameLabel ?? { name: '', value: '' };
-                // Determine if this is receive data (negative values)
-                const isReceive = seriesIndex >= transmitData.length;
-                const valuePrefix = isReceive ? 'Receive ' : 'Transmit ';
-                return (_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsxs("td", { className: "w-1/4", children: [valuePrefix, "Value"] }), _jsx("td", { className: "w-3/4", children: valueFormatter(Math.abs(originalPoint.value), 'bytes_per_second', 2) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(new Date(originalPoint.timestamp), timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: labels
-                                    .filter(label => label.name !== '__name__')
-                                    .map(label => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${transformUtilizationLabels(label.name)}="${label.value}"`, maxTextLength: 37, id: `${seriesIndex.toString()}-${pointIndex.toString()}-tooltip-${label.name}` }) }, `${seriesIndex.toString()}-${pointIndex.toString()}-${label.name}`))) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }));
-            }
-            return null;
-        } }));
-};
-const AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSeriesClick, }) => {
-    const { isDarkMode } = useParcaContext();
-    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
-    const transformedData = useMemo(() => transformNetworkSeriesToSeries(transmitData, receiveData), [transmitData, receiveData]);
-    const contextMenuItems = useMemo(() => {
-        return createThroughputContextMenuItems(addLabelMatcher, transmitData, receiveData);
-    }, [addLabelMatcher, transmitData, receiveData]);
-    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: false, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawAreaChart, { transmitData: transmitData, receiveData: receiveData, transformedData: transformedData, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to, selectedSeries: selectedSeries, onSeriesClick: onSeriesClick, contextMenuItems: contextMenuItems })) }, "area-chart-graph-loaded") }));
-};
-export default AreaChart;

package/dist/MetricsGraph/UtilizationMetrics/index.d.ts

@@ -1,28 +0,0 @@
-import { DateTimeRange } from '@parca/components';
-import { type UtilizationMetrics as MetricSeries } from '../../ProfileSelector';
-interface CommonProps {
-    setTimeRange: (range: DateTimeRange) => void;
-    humanReadableName: string;
-    from: number;
-    to: number;
-    onSeriesClick?: (seriesIndex: number) => void;
-}
-type Props = CommonProps & {
-    data: MetricSeries[];
-    yAxisUnit: string;
-    utilizationMetricsLoading?: boolean;
-    addLabelMatcher?: (labels: {
-        key: string;
-        value: string;
-    } | Array<{
-        key: string;
-        value: string;
-    }>) => void;
-    onSelectedSeriesChange?: (series: Array<{
-        key: string;
-        value: string;
-    }>) => void;
-};
-declare const UtilizationMetrics: ({ data, setTimeRange, utilizationMetricsLoading, humanReadableName, from, to, yAxisUnit, addLabelMatcher, onSeriesClick, onSelectedSeriesChange: _onSelectedSeriesChange, }: Props) => JSX.Element;
-export default UtilizationMetrics;
-//# sourceMappingURL=index.d.ts.map

package/dist/MetricsGraph/UtilizationMetrics/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAI9E,UAAU,WAAW;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAYD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,CAChB,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CAChF,CAAC;AA4TF,QAAA,MAAM,kBAAkB,GAAI,6KAWzB,KAAK,KAAG,GAAG,CAAC,OAwCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -1,186 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2022 The Parca Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-import { useMemo } from 'react';
-import { Icon } from '@iconify/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
-import { formatDate, timePattern, valueFormatter } from '@parca/utilities';
-import MetricsGraph from '../index';
-import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
-const transformUtilizationLabels = (label) => {
-    return label.replace('attributes.', '').replace('attributes_resource.', '');
-};
-const createUtilizationContextMenuItems = (addLabelMatcher, originalData) => {
-    return [
-        {
-            id: 'focus-on-single-series',
-            label: 'Focus only on this series',
-            icon: 'ph:star',
-            onClick: (closestPoint, _series) => {
-                if (closestPoint != null &&
-                    originalData.length > 0 &&
-                    originalData[closestPoint.seriesIndex] != null) {
-                    const originalSeriesData = originalData[closestPoint.seriesIndex];
-                    if (originalSeriesData.labelset?.labels != null) {
-                        const labels = originalSeriesData.labelset.labels.filter(label => label.name !== '__name__');
-                        const labelsToAdd = labels.map(label => ({
-                            key: label.name,
-                            value: label.value,
-                        }));
-                        addLabelMatcher(labelsToAdd);
-                    }
-                }
-            },
-        },
-        {
-            id: 'add-to-query',
-            label: 'Add to query',
-            icon: 'material-symbols:add',
-            createDynamicItems: (closestPoint, _series) => {
-                if (closestPoint == null ||
-                    originalData.length === 0 ||
-                    originalData[closestPoint.seriesIndex] == null) {
-                    return [
-                        {
-                            id: 'no-labels-available',
-                            label: 'No labels available',
-                            icon: 'ph:warning',
-                            disabled: () => true,
-                            onClick: () => { }, // No-op for disabled item
-                        },
-                    ];
-                }
-                const originalSeriesData = originalData[closestPoint.seriesIndex];
-                if (originalSeriesData.labelset?.labels == null) {
-                    return [
-                        {
-                            id: 'no-labels-available',
-                            label: 'No labels available',
-                            icon: 'ph:warning',
-                            disabled: () => true,
-                            onClick: () => { }, // No-op for disabled item
-                        },
-                    ];
-                }
-                const labels = originalSeriesData.labelset.labels.filter(label => label.name !== '__name__');
-                return labels.map(label => ({
-                    id: `add-label-${label.name}`,
-                    label: (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${transformUtilizationLabels(label.name)}="${label.value}"` })),
-                    onClick: () => {
-                        addLabelMatcher({
-                            key: label.name,
-                            value: label.value,
-                        });
-                    },
-                }));
-            },
-        },
-    ];
-};
-const transformMetricSeriesToSeries = (data) => {
-    return data.map(metricSeries => {
-        if (metricSeries.labelset != null) {
-            const labels = metricSeries.labelset.labels ?? [];
-            const sortedLabels = labels.sort((a, b) => a.name.localeCompare(b.name));
-            const id = sortedLabels.map(label => `${label.name}=${label.value}`).join(',');
-            return {
-                id: id !== '' ? id : 'default',
-                values: metricSeries.samples.map((sample) => [
-                    sample.timestamp,
-                    sample.value,
-                ]),
-            };
-        }
-        return {
-            id: 'default',
-            values: [],
-        };
-    });
-};
-const _getYAxisUnit = (name) => {
-    switch (name) {
-        case 'gpu_power_watt':
-            return 'watts';
-        case 'gpu_temperature_celsius':
-            return 'celsius';
-        case 'gpu_clock_hertz':
-            return 'hertz';
-        default:
-            return 'percent';
-    }
-};
-const RawUtilizationMetrics = ({ data, originalData, setTimeRange, width, height, margin, humanReadableName, from, to, yAxisUnit, contextMenuItems, onSeriesClick, }) => {
-    const { timezone } = useParcaContext();
-    return (_jsx(MetricsGraph, { data: data.map((val, idx) => ({
-            ...val,
-            highlighted: originalData?.[idx]?.isSelected ?? false,
-        })), from: from, to: to, setTimeRange: setTimeRange, onSampleClick: closestPoint => {
-            if (onSeriesClick != null) {
-                onSeriesClick(closestPoint.seriesIndex);
-            }
-        }, yAxisLabel: humanReadableName, yAxisUnit: yAxisUnit, width: width, height: height, margin: margin, contextMenuItems: contextMenuItems, renderTooltipContent: (seriesIndex, pointIndex) => {
-            if (originalData?.[seriesIndex]?.samples?.[pointIndex] != null) {
-                const originalSeriesData = originalData[seriesIndex];
-                const originalPoint = originalData[seriesIndex].samples[pointIndex];
-                const labels = originalSeriesData.labelset?.labels ?? [];
-                const nameLabel = labels.find(e => e.name === '__name__');
-                const highlightedNameLabel = nameLabel ?? { name: '', value: '' };
-                // Calculate attributes maps for utilization metrics
-                const attributesMap = labels
-                    .filter(label => label.name.startsWith('attributes.') &&
-                    !label.name.startsWith('attributes_resource.'))
-                    .reduce((acc, label) => {
-                    const key = label.name.replace('attributes.', '');
-                    acc[key] = label.value;
-                    return acc;
-                }, {});
-                const attributesResourceMap = labels
-                    .filter(label => label.name.startsWith('attributes_resource.'))
-                    .reduce((acc, label) => {
-                    const key = label.name.replace('attributes_resource.', '');
-                    acc[key] = label.value;
-                    return acc;
-                }, {});
-                return (_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.value, yAxisUnit, 2) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(new Date(originalPoint.timestamp), timePattern(timezone), timezone) })] })] }) }) }), _jsxs("span", { className: "my-2 block text-gray-500", children: [Object.keys(attributesResourceMap).length > 0 ? (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Resource Attributes" })) : null, _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesResourceMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${transformUtilizationLabels(name)}="${attributesResourceMap[name] ?? ''}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesResourceMap[name] ?? ''}` }) }, 'resourceattribute-' +
-                                            seriesIndex.toString() +
-                                            '-' +
-                                            pointIndex.toString() +
-                                            '-' +
-                                            name))) }), Object.keys(attributesMap).length > 0 ? (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Attributes" })) : null, _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${transformUtilizationLabels(name)}="${attributesMap[name] ?? ''}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesMap[name] ?? ''}` }) }, 'attribute-' +
-                                            seriesIndex.toString() +
-                                            '-' +
-                                            pointIndex.toString() +
-                                            '-' +
-                                            name))) }), labels
-                                        .filter(label => label.name !== '__name__' && !label.name.startsWith('attributes'))
-                                        .map(label => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${transformUtilizationLabels(label.name)}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, 'attribute-' +
-                                        seriesIndex.toString() +
-                                        '-' +
-                                        pointIndex.toString() +
-                                        '-label-' +
-                                        label.name)))] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }));
-            }
-            return null;
-        } }));
-};
-const UtilizationMetrics = ({ data, setTimeRange, utilizationMetricsLoading, humanReadableName, from, to, yAxisUnit, addLabelMatcher, onSeriesClick, onSelectedSeriesChange: _onSelectedSeriesChange, }) => {
-    const { isDarkMode } = useParcaContext();
-    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
-    const transformedData = useMemo(() => transformMetricSeriesToSeries(data), [data]);
-    const contextMenuItems = useMemo(() => {
-        return addLabelMatcher != null ? createUtilizationContextMenuItems(addLabelMatcher, data) : [];
-    }, [addLabelMatcher, data]);
-    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: false, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawUtilizationMetrics, { data: transformedData, originalData: data, setTimeRange: setTimeRange, width: width, height: height, margin: margin, humanReadableName: humanReadableName, from: from, to: to, yAxisUnit: yAxisUnit, contextMenuItems: contextMenuItems, onSeriesClick: onSeriesClick })) }, "utilization-metrics-graph-loaded") }));
-};
-export default UtilizationMetrics;