@parca/profile 0.16.465 → 0.16.466

package/src/ProfileMetricsGraph/index.tsx

@@ -11,26 +11,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo} from 'react';
+import {useEffect} from 'react';
 
-import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {AnimatePresence, motion} from 'framer-motion';
 
-import {Duration, Label, QueryRangeResponse, QueryServiceClient, Timestamp} from '@parca/client';
-import {
-  DateTimeRange,
-  MetricsGraphSkeleton,
-  useGrpcMetadata,
-  useParcaContext,
-  useURLState,
-} from '@parca/components';
+import {Label, QueryServiceClient} from '@parca/client';
+import {DateTimeRange, MetricsGraphSkeleton, useParcaContext} from '@parca/components';
 import {Query} from '@parca/parser';
-import {capitalizeOnlyFirstLetter, getStepDuration} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph from '../MetricsGraph';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
-import useGrpcQuery from '../useGrpcQuery';
+import {useQueryRange} from './hooks/useQueryRange';
 
 interface ProfileMetricsEmptyStateProps {
   message: string;
@@ -76,78 +69,6 @@ interface ProfileMetricsGraphProps {
   comparing?: boolean;
 }
 
-export interface IQueryRangeState {
-  response: QueryRangeResponse | null;
-  isLoading: boolean;
-  error: RpcError | null;
-}
-
-const getStepCountFromScreenWidth = (pixelsPerPoint: number): number => {
-  let width =
-    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-
-  // subtract the padding around the graph
-  width = width - (20 + 24 + 68) * 2;
-  return Math.round(width / pixelsPerPoint);
-};
-
-export const useQueryRange = (
-  client: QueryServiceClient,
-  queryExpression: string,
-  start: number,
-  end: number,
-  sumBy: string[],
-  skip = false
-): IQueryRangeState => {
-  const metadata = useGrpcMetadata();
-  const [stepCountStr, setStepCount] = useURLState('step_count');
-
-  const defaultStepCount = useMemo(() => {
-    return getStepCountFromScreenWidth(10);
-  }, []);
-
-  const stepCount = useMemo(() => {
-    if (stepCountStr != null) {
-      return parseInt(stepCountStr as string, 10);
-    }
-
-    return defaultStepCount;
-  }, [stepCountStr, defaultStepCount]);
-
-  useEffect(() => {
-    if (stepCountStr == null) {
-      setStepCount(defaultStepCount.toString());
-    }
-  }, [stepCountStr, defaultStepCount, setStepCount]);
-
-  const {data, isLoading, error} = useGrpcQuery<QueryRangeResponse | undefined>({
-    key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
-    queryFn: async () => {
-      const stepDuration = getStepDuration(start, end, stepCount);
-      const {response} = await client.queryRange(
-        {
-          query: queryExpression,
-          start: Timestamp.fromDate(new Date(start)),
-          end: Timestamp.fromDate(new Date(end)),
-          step: Duration.create(stepDuration),
-          limit: 0,
-          sumBy,
-        },
-        {meta: metadata}
-      );
-      return response;
-    },
-    options: {
-      retry: false,
-      enabled: !skip,
-      staleTime: 1000 * 60 * 5, // 5 minutes
-    },
-  });
-
-  return {isLoading, error: error as RpcError | null, response: data ?? null};
-};
-
 const ProfileMetricsGraph = ({
   queryClient,
   queryExpression,
@@ -184,6 +105,7 @@ const ProfileMetricsGraph = ({
   }, [perf, response]);
 
   const series = response?.series;
+
   const dataAvailable = series !== null && series !== undefined && series?.length > 0;
 
   const loading = metricsGraphLoading;

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -18,8 +18,9 @@ import {DateTimeRange} from '@parca/components';
 import {Query} from '@parca/parser';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
+import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
-import {QuerySelection} from './index';
+import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
 
 interface MetricsGraphSectionProps {
   showMetricsGraph: boolean;
@@ -38,6 +39,8 @@ interface MetricsGraphSectionProps {
   query: Query;
   setNewQueryExpression: (queryExpression: string) => void;
   setQueryExpression: (updateTs?: boolean) => void;
+  utilizationMetrics?: UtilizationMetricsType[];
+  utilizationMetricsLoading?: boolean;
 }
 
 export function MetricsGraphSection({
@@ -56,6 +59,8 @@ export function MetricsGraphSection({
   selectProfile,
   query,
   setNewQueryExpression,
+  utilizationMetrics,
+  utilizationMetricsLoading,
 }: MetricsGraphSectionProps): JSX.Element {
   const handleTimeRangeChange = (range: DateTimeRange): void => {
     const from = range.getFromMs();
@@ -141,31 +146,46 @@ export function MetricsGraphSection({
         {showMetricsGraph ? 'Hide' : 'Show'} Metrics Graph
       </button>
       {showMetricsGraph && (
-        <div style={{height: heightStyle}}>
-          {querySelection.expression !== '' &&
-          querySelection.from !== undefined &&
-          querySelection.to !== undefined ? (
-            <ProfileMetricsGraph
-              queryClient={queryClient}
-              queryExpression={querySelection.expression}
-              from={querySelection.from}
-              to={querySelection.to}
-              profile={profileSelection}
-              comparing={comparing}
-              sumBy={querySelection.sumBy ?? sumBy ?? []}
-              sumByLoading={defaultSumByLoading}
-              setTimeRange={handleTimeRangeChange}
-              addLabelMatcher={addLabelMatcher}
-              onPointClick={handlePointClick}
-            />
-          ) : (
-            profileSelection === null && (
-              <div className="p-2">
-                <ProfileMetricsEmptyState message="Please select a profile type and click 'Search' to begin." />
-              </div>
-            )
-          )}
-        </div>
+        <>
+          <div style={{height: heightStyle}}>
+            {querySelection.expression !== '' &&
+            querySelection.from !== undefined &&
+            querySelection.to !== undefined ? (
+              <>
+                {utilizationMetrics !== undefined ? (
+                  <UtilizationMetricsGraph
+                    data={utilizationMetrics}
+                    addLabelMatcher={addLabelMatcher}
+                    setTimeRange={handleTimeRangeChange}
+                    utilizationMetricsLoading={utilizationMetricsLoading}
+                  />
+                ) : (
+                  <>
+                    <ProfileMetricsGraph
+                      queryClient={queryClient}
+                      queryExpression={querySelection.expression}
+                      from={querySelection.from}
+                      to={querySelection.to}
+                      profile={profileSelection}
+                      comparing={comparing}
+                      sumBy={querySelection.sumBy ?? sumBy ?? []}
+                      sumByLoading={defaultSumByLoading}
+                      setTimeRange={handleTimeRangeChange}
+                      addLabelMatcher={addLabelMatcher}
+                      onPointClick={handlePointClick}
+                    />
+                  </>
+                )}
+              </>
+            ) : (
+              profileSelection === null && (
+                <div className="p-2">
+                  <ProfileMetricsEmptyState message="Please select a profile type and click 'Search' to begin." />
+                </div>
+              )
+            )}
+          </div>
+        </>
       )}
     </div>
   );

package/src/ProfileSelector/index.tsx

@@ -53,6 +53,17 @@ interface ProfileSelectorFeatures {
   disableProfileTypesDropdown?: boolean;
 }
 
+export interface UtilizationMetrics {
+  timestamp: number;
+  value: number;
+  resource: {
+    [key: string]: string;
+  };
+  attributes: {
+    [key: string]: string;
+  };
+}
+
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
   queryClient: QueryServiceClient;
   querySelection: QuerySelection;
@@ -65,6 +76,8 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   navigateTo: NavigateFunction;
   setDisplayHideMetricsGraphButton: Dispatch<SetStateAction<boolean>>;
   suffix?: string;
+  utilizationMetrics?: UtilizationMetrics[];
+  utilizationMetricsLoading?: boolean;
 }
 
 export interface IProfileTypesResult {
@@ -108,6 +121,8 @@ const ProfileSelector = ({
   showProfileTypeSelector = true,
   disableExplorativeQuerying = false,
   setDisplayHideMetricsGraphButton,
+  utilizationMetrics,
+  utilizationMetricsLoading,
 }: ProfileSelectorProps): JSX.Element => {
   const {
     loading: profileTypesLoading,
@@ -288,7 +303,6 @@ const ProfileSelector = ({
           </div>
         )}
       </div>
-
       <MetricsGraphSection
         showMetricsGraph={showMetricsGraph}
         setDisplayHideMetricsGraphButton={setDisplayHideMetricsGraphButton}
@@ -306,6 +320,8 @@ const ProfileSelector = ({
         query={query}
         setQueryExpression={setQueryExpression}
         setNewQueryExpression={setNewQueryExpression}
+        utilizationMetrics={utilizationMetrics}
+        utilizationMetricsLoading={utilizationMetricsLoading}
       />
     </>
   );