@parca/profile 0.16.253 → 0.16.254

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.254 (2023-09-14)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.253](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.252...@parca/profile@0.16.253) (2023-09-11)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileExplorer/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
-import type { NavigateFunction } from '@parca/utilities';
+import { type NavigateFunction } from '@parca/utilities';
 interface ProfileExplorerProps {
     queryClient: QueryServiceClient;
     queryParams: any;

package/dist/ProfileExplorer/index.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } 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.
@@ -15,10 +15,14 @@ import { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import { DateTimeRange, KeyDownProvider, useParcaContext } from '@parca/components';
 import { store } from '@parca/store';
+import { capitalizeOnlyFirstLetter } from '@parca/utilities';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { useProfileTypes } from '../ProfileSelector';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
+const ErrorContent = ({ errorMessage }) => {
+    return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
+};
 const getExpressionAsAString = (expression) => {
     const x = Array.isArray(expression) ? expression.join() : expression;
     return x;
@@ -45,10 +49,10 @@ const swapQueryParameters = (o) => {
 };
 const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error: profileTypesError, } = useProfileTypes(queryClient);
-    const { loader, noDataPrompt, onError } = useParcaContext();
+    const { loader, noDataPrompt, onError, authenticationErrorMessage } = useParcaContext();
     useEffect(() => {
         if (profileTypesError !== undefined && profileTypesError !== null) {
-            onError?.(profileTypesError, 'ProfileExplorer');
+            onError?.(profileTypesError);
         }
     }, [profileTypesError, onError]);
     /* eslint-disable @typescript-eslint/naming-convention */
@@ -83,7 +87,10 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         return _jsx(_Fragment, { children: noDataPrompt });
     }
     if (profileTypesError !== undefined && profileTypesError !== null) {
-        return (_jsxs("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: [_jsx("strong", { className: "font-bold", children: "Error! " }), _jsx("span", { className: "block sm:inline", children: profileTypesError.message })] }));
+        if (authenticationErrorMessage !== undefined && profileTypesError.code === 'UNAUTHENTICATED') {
+            return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
+        }
+        return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(profileTypesError.message) });
     }
     const sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
     time_selection_a = sanitizedRange.time_selection_a;

package/dist/ProfileIcicleGraph/index.js

@@ -16,11 +16,14 @@ import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { Button, Select, useParcaContext, useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { divide, selectQueryParam } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, divide, selectQueryParam, } from '@parca/utilities';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, FIELD_LABELS, } from './IcicleGraphArrow';
 const numberFormatter = new Intl.NumberFormat('en-US');
+const ErrorContent = ({ errorMessage }) => {
+    return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
+};
 const ShowHideLegendButton = ({ navigateTo }) => {
     const [colorStackLegend, setStoreColorStackLegend] = useURLState({
         param: 'color_stack_legend',
@@ -64,7 +67,7 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy })] }));
 };
 const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }) {
-    const { loader } = useParcaContext();
+    const { loader, onError, authenticationErrorMessage } = useParcaContext();
     const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
@@ -98,8 +101,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         return _jsx("div", { className: "h-96", children: loader });
     }
     if (error != null) {
-        console.error('Error: ', error);
-        return _jsxs("div", { className: "flex justify-center p-10", children: ["An error occurred: ", error.message] });
+        onError?.(error);
+        if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
+            return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
+        }
+        return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
     }
     if (graph === undefined && arrow === undefined)
         return _jsx("div", { className: "mx-auto text-center", children: "No data..." });

package/dist/ProfileMetricsGraph/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } 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.
@@ -15,10 +15,13 @@ import { useEffect, useState } from 'react';
 import { Duration, Timestamp } from '@parca/client';
 import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { Query } from '@parca/parser';
-import { getStepDuration } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, getStepDuration } from '@parca/utilities';
 import MetricsGraph from '../MetricsGraph';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
 import useDelayedLoader from '../useDelayedLoader';
+const ErrorContent = ({ errorMessage }) => {
+    return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
+};
 export const ProfileMetricsEmptyState = ({ message }) => {
     return (_jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: _jsx("p", { children: message }) }));
 };
@@ -58,11 +61,11 @@ export const useQueryRange = (client, queryExpression, start, end) => {
 const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, }) => {
     const { isLoading, response, error } = useQueryRange(queryClient, queryExpression, from, to);
     const isLoaderVisible = useDelayedLoader(isLoading);
-    const { loader, onError, perf } = useParcaContext();
+    const { loader, onError, perf, authenticationErrorMessage } = useParcaContext();
     const { width, height, margin } = useMetricsGraphDimensions(comparing);
     useEffect(() => {
         if (error !== null) {
-            onError?.(error, 'metricsGraph');
+            onError?.(error);
         }
     }, [error, onError]);
     useEffect(() => {
@@ -77,7 +80,10 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
         return _jsx(_Fragment, { children: loader });
     }
     if (error !== null) {
-        return (_jsxs("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: [_jsx("strong", { className: "font-bold", children: "Error! " }), _jsx("span", { className: "block sm:inline", children: error.message })] }));
+        if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
+            return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
+        }
+        return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
     }
     if (dataAvailable) {
         const handleSampleClick = (timestamp, _value, labels) => {

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.253",
+  "version": "0.16.254",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.86",
-    "@parca/components": "^0.16.191",
+    "@parca/components": "^0.16.192",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/hooks": "^0.0.23",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.102",
-    "@parca/utilities": "^0.0.30",
+    "@parca/store": "^0.16.103",
+    "@parca/utilities": "^0.0.31",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -49,5 +49,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "b79ac4f2315e2fa9dc46a44f231ad328955bfd25"
+  "gitHead": "0ca31b9ddf1c2db1ccd5cd3c5e7d7f0e572299fd"
 }

package/src/ProfileExplorer/index.tsx

@@ -18,7 +18,7 @@ import {Provider} from 'react-redux';
 import {QueryServiceClient} from '@parca/client';
 import {DateTimeRange, KeyDownProvider, useParcaContext} from '@parca/components';
 import {store} from '@parca/store';
-import type {NavigateFunction} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter, type NavigateFunction} from '@parca/utilities';
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import {QuerySelection, useProfileTypes} from '../ProfileSelector';
@@ -31,6 +31,17 @@ interface ProfileExplorerProps {
   navigateTo: NavigateFunction;
 }
 
+const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
+  return (
+    <div
+      className="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
+      role="alert"
+    >
+      <span className="block sm:inline">{errorMessage}</span>
+    </div>
+  );
+};
+
 const getExpressionAsAString = (expression: string | []): string => {
   const x = Array.isArray(expression) ? expression.join() : expression;
   return x;
@@ -81,11 +92,11 @@ const ProfileExplorerApp = ({
     error: profileTypesError,
   } = useProfileTypes(queryClient);
 
-  const {loader, noDataPrompt, onError} = useParcaContext();
+  const {loader, noDataPrompt, onError, authenticationErrorMessage} = useParcaContext();
 
   useEffect(() => {
     if (profileTypesError !== undefined && profileTypesError !== null) {
-      onError?.(profileTypesError, 'ProfileExplorer');
+      onError?.(profileTypesError);
     }
   }, [profileTypesError, onError]);
 
@@ -166,15 +177,11 @@ const ProfileExplorerApp = ({
   }
 
   if (profileTypesError !== undefined && profileTypesError !== null) {
-    return (
-      <div
-        className="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
-        role="alert"
-      >
-        <strong className="font-bold">Error! </strong>
-        <span className="block sm:inline">{profileTypesError.message}</span>
-      </div>
-    );
+    if (authenticationErrorMessage !== undefined && profileTypesError.code === 'UNAUTHENTICATED') {
+      return <ErrorContent errorMessage={authenticationErrorMessage} />;
+    }
+
+    return <ErrorContent errorMessage={capitalizeOnlyFirstLetter(profileTypesError.message)} />;
   }
 
   const sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);

package/src/ProfileIcicleGraph/index.tsx

@@ -19,7 +19,12 @@ import {Icon} from '@iconify/react';
 import {Flamegraph, FlamegraphArrow} from '@parca/client';
 import {Button, Select, useParcaContext, useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
-import {divide, selectQueryParam, type NavigateFunction} from '@parca/utilities';
+import {
+  capitalizeOnlyFirstLetter,
+  divide,
+  selectQueryParam,
+  type NavigateFunction,
+} from '@parca/utilities';
 
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
@@ -49,6 +54,10 @@ interface ProfileIcicleGraphProps {
   error?: any;
 }
 
+const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
+  return <div className="flex justify-center p-10">{errorMessage}</div>;
+};
+
 const ShowHideLegendButton = ({navigateTo}: {navigateTo?: NavigateFunction}): JSX.Element => {
   const [colorStackLegend, setStoreColorStackLegend] = useURLState({
     param: 'color_stack_legend',
@@ -152,7 +161,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   error,
   width,
 }: ProfileIcicleGraphProps): JSX.Element {
-  const {loader} = useParcaContext();
+  const {loader, onError, authenticationErrorMessage} = useParcaContext();
   const compareMode: boolean =
     selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
 
@@ -217,8 +226,13 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   }
 
   if (error != null) {
-    console.error('Error: ', error);
-    return <div className="flex justify-center p-10">An error occurred: {error.message}</div>;
+    onError?.(error);
+
+    if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
+      return <ErrorContent errorMessage={authenticationErrorMessage} />;
+    }
+
+    return <ErrorContent errorMessage={capitalizeOnlyFirstLetter(error.message)} />;
   }
 
   if (graph === undefined && arrow === undefined)

package/src/ProfileMetricsGraph/index.tsx

@@ -18,7 +18,7 @@ import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {Duration, Label, QueryRangeResponse, QueryServiceClient, Timestamp} from '@parca/client';
 import {DateTimeRange, useGrpcMetadata, useParcaContext} from '@parca/components';
 import {Query} from '@parca/parser';
-import {getStepDuration} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter, getStepDuration} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph from '../MetricsGraph';
@@ -29,6 +29,17 @@ interface ProfileMetricsEmptyStateProps {
   message: string;
 }
 
+const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
+  return (
+    <div
+      className="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
+      role="alert"
+    >
+      <span className="block sm:inline">{errorMessage}</span>
+    </div>
+  );
+};
+
 export const ProfileMetricsEmptyState = ({message}: ProfileMetricsEmptyStateProps): JSX.Element => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center">
@@ -114,12 +125,12 @@ const ProfileMetricsGraph = ({
 }: ProfileMetricsGraphProps): JSX.Element => {
   const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
   const isLoaderVisible = useDelayedLoader(isLoading);
-  const {loader, onError, perf} = useParcaContext();
+  const {loader, onError, perf, authenticationErrorMessage} = useParcaContext();
   const {width, height, margin} = useMetricsGraphDimensions(comparing);
 
   useEffect(() => {
     if (error !== null) {
-      onError?.(error, 'metricsGraph');
+      onError?.(error);
     }
   }, [error, onError]);
 
@@ -139,15 +150,11 @@ const ProfileMetricsGraph = ({
   }
 
   if (error !== null) {
-    return (
-      <div
-        className="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
-        role="alert"
-      >
-        <strong className="font-bold">Error! </strong>
-        <span className="block sm:inline">{error.message}</span>
-      </div>
-    );
+    if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
+      return <ErrorContent errorMessage={authenticationErrorMessage} />;
+    }
+
+    return <ErrorContent errorMessage={capitalizeOnlyFirstLetter(error.message)} />;
   }
 
   if (dataAvailable) {