@parca/profile 0.16.183 → 0.16.184

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.184](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.183...@parca/profile@0.16.184) (2023-06-15)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.183](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.182...@parca/profile@0.16.183) (2023-06-14)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileView/index.d.ts

@@ -38,6 +38,7 @@ export interface ProfileViewProps {
     compare?: boolean;
     onDownloadPProf: () => void;
     onFlamegraphContainerResize?: ResizeHandler;
+    pprofDownloading?: boolean;
 }
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, onFlamegraphContainerResize, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, onFlamegraphContainerResize, pprofDownloading, }: ProfileViewProps) => JSX.Element;
 export {};

package/dist/ProfileView/index.js

@@ -93,7 +93,7 @@ function arrayEquals(a, b) {
         a.every(function (val, index) { return val === b[index]; }));
 }
 export var ProfileView = function (_a) {
-    var total = _a.total, filtered = _a.filtered, flamegraphData = _a.flamegraphData, topTableData = _a.topTableData, callgraphData = _a.callgraphData, sampleUnit = _a.sampleUnit, profileSource = _a.profileSource, queryClient = _a.queryClient, navigateTo = _a.navigateTo, onDownloadPProf = _a.onDownloadPProf, onFlamegraphContainerResize = _a.onFlamegraphContainerResize;
+    var total = _a.total, filtered = _a.filtered, flamegraphData = _a.flamegraphData, topTableData = _a.topTableData, callgraphData = _a.callgraphData, sampleUnit = _a.sampleUnit, profileSource = _a.profileSource, queryClient = _a.queryClient, navigateTo = _a.navigateTo, onDownloadPProf = _a.onDownloadPProf, onFlamegraphContainerResize = _a.onFlamegraphContainerResize, pprofDownloading = _a.pprofDownloading;
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
     var _c = useState([]), curPath = _c[0], setCurPath = _c[1];
     var _d = useURLState({
@@ -240,7 +240,9 @@ export var ProfileView = function (_a) {
     return (_jsx(KeyDownProvider, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex w-full py-3" }, { children: [_jsxs("div", __assign({ className: "flex space-x-4 lg:w-1/2" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    } }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] })), _jsx("div", __assign({ className: "ml-auto flex gap-2" }, { children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) }))] })), _jsx("div", __assign({ className: "w-full", ref: ref }, { children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, __assign({ onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable", direction: "horizontal" }, { children: function (provided) { return (_jsx("div", __assign({ ref: provided.innerRef, className: "flex w-full justify-between space-x-4" }, provided.droppableProps, { children: dashboardItems.map(function (dashboardItem, index) {
+                                                    }, disabled: pprofDownloading }, { children: pprofDownloading != null && pprofDownloading
+                                                        ? 'Downloading'
+                                                        : 'Download pprof' }))] })), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] })), _jsx("div", __assign({ className: "ml-auto flex gap-2" }, { children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) }))] })), _jsx("div", __assign({ className: "w-full", ref: ref }, { children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, __assign({ onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable", direction: "horizontal" }, { children: function (provided) { return (_jsx("div", __assign({ ref: provided.innerRef, className: "flex w-full justify-between space-x-4" }, provided.droppableProps, { children: dashboardItems.map(function (dashboardItem, index) {
                                             return (_jsx(Draggable, __assign({ draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView }, { children: function (provided, snapshot) { return (_createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: dashboardItem, className: cx('rounded border border-gray-300 p-3 dark:border-gray-500 dark:bg-gray-700', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') }),
                                                     _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))); } }), dashboardItem));
                                         }) }))); } })) }))) }))] }) }) })) }));

package/dist/ProfileViewWithData.js

@@ -62,6 +62,7 @@ export var ProfileViewWithData = function (_a) {
     var dashboardItems = useURLState({ param: 'dashboard_items', navigateTo: navigateTo })[0];
     var _f = useState(0), nodeTrimThreshold = _f[0], setNodeTrimThreshold = _f[1];
     var enableTrimming = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key)[0];
+    var _g = useState(false), pprofDownloading = _g[0], setPprofDownloading = _g[1];
     useEffect(function () {
         if (!enableTrimming) {
             setNodeTrimThreshold(0);
@@ -77,17 +78,17 @@ export var ProfileViewWithData = function (_a) {
         }
         setNodeTrimThreshold(threshold);
     };
-    var _g = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
+    var _h = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold: nodeTrimThreshold,
-    }), flamegraphLoading = _g.isLoading, flamegraphResponse = _g.response, flamegraphError = _g.error;
+    }), flamegraphLoading = _h.isLoading, flamegraphResponse = _h.response, flamegraphError = _h.error;
     var perf = useParcaContext().perf;
-    var _h = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
+    var _j = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
         skip: !dashboardItems.includes('table'),
-    }), topTableLoading = _h.isLoading, topTableResponse = _h.response, topTableError = _h.error;
-    var _j = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
+    }), topTableLoading = _j.isLoading, topTableResponse = _j.response, topTableError = _j.error;
+    var _k = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
         skip: !dashboardItems.includes('callgraph'),
-    }), callgraphLoading = _j.isLoading, callgraphResponse = _j.response, callgraphError = _j.error;
+    }), callgraphLoading = _k.isLoading, callgraphResponse = _k.response, callgraphError = _k.error;
     useEffect(function () {
         var _a, _b;
         if (!flamegraphLoading && (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraph') {
@@ -120,13 +121,16 @@ export var ProfileViewWithData = function (_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
+                    setPprofDownloading(true);
                     return [4 /*yield*/, downloadPprof(profileSource.QueryRequest(), queryClient, metadata)];
                 case 2:
                     blob = _a.sent();
                     saveAsBlob(blob, "profile.pb.gz");
+                    setPprofDownloading(false);
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
+                    setPprofDownloading(false);
                     console.error('Error while querying', error_1);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
@@ -167,6 +171,6 @@ export var ProfileViewWithData = function (_a) {
                 ? (_e = callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report) === null || _e === void 0 ? void 0 : _e.callgraph
                 : undefined,
             error: callgraphError,
-        }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: function () { return void downloadPProfClick(); }, onFlamegraphContainerResize: onFlamegraphContainerResize }));
+        }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: function () { return void downloadPProfClick(); }, pprofDownloading: pprofDownloading, onFlamegraphContainerResize: onFlamegraphContainerResize }));
 };
 export default ProfileViewWithData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.183",
+  "version": "0.16.184",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.73",
@@ -46,5 +46,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "48ae0ca7edb2353bcb439a43e78bc19fdbc91d27"
+  "gitHead": "850348dc0238c127c875f12ac53b48856ee3c5a2"
 }

package/src/ProfileView/index.tsx

@@ -87,6 +87,7 @@ export interface ProfileViewProps {
   compare?: boolean;
   onDownloadPProf: () => void;
   onFlamegraphContainerResize?: ResizeHandler;
+  pprofDownloading?: boolean;
 }
 
 function arrayEquals<T>(a: T[], b: T[]): boolean {
@@ -110,6 +111,7 @@ export const ProfileView = ({
   navigateTo,
   onDownloadPProf,
   onFlamegraphContainerResize,
+  pprofDownloading,
 }: ProfileViewProps): JSX.Element => {
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
@@ -331,8 +333,11 @@ export const ProfileView = ({
                       e.preventDefault();
                       onDownloadPProf();
                     }}
+                    disabled={pprofDownloading}
                   >
-                    Download pprof
+                    {pprofDownloading != null && pprofDownloading
+                      ? 'Downloading'
+                      : 'Download pprof'}
                   </Button>
                 </div>
                 <FilterByFunctionButton navigateTo={navigateTo} />

package/src/ProfileViewWithData.tsx

@@ -39,6 +39,7 @@ export const ProfileViewWithData = ({
   const [dashboardItems] = useURLState({param: 'dashboard_items', navigateTo});
   const [nodeTrimThreshold, setNodeTrimThreshold] = useState<number>(0);
   const [enableTrimming] = useUserPreference<boolean>(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
+  const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
   useEffect(() => {
     if (!enableTrimming) {
@@ -113,9 +114,12 @@ export const ProfileViewWithData = ({
     }
 
     try {
+      setPprofDownloading(true);
       const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
       saveAsBlob(blob, `profile.pb.gz`);
+      setPprofDownloading(false);
     } catch (error) {
+      setPprofDownloading(false);
       console.error('Error while querying', error);
     }
   };
@@ -168,6 +172,7 @@ export const ProfileViewWithData = ({
       queryClient={queryClient}
       navigateTo={navigateTo}
       onDownloadPProf={() => void downloadPProfClick()}
+      pprofDownloading={pprofDownloading}
       onFlamegraphContainerResize={onFlamegraphContainerResize}
     />
   );