@parca/profile 0.16.82 → 0.16.84

package/src/TopTable/benchmarks/benchdata/populateData.js

@@ -0,0 +1,91 @@
+// 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.
+
+const {GrpcWebFetchTransport} = require('@protobuf-ts/grpcweb-transport');
+const client = require('@parca/client');
+const fs = require('fs-extra');
+const path = require('path');
+// const {fileURLToPath} = require('url');
+const fetch = require('node-fetch');
+
+globalThis.fetch = fetch;
+globalThis.Headers = fetch.Headers;
+const DIR_NAME = __dirname; // path.dirname(fileURLToPath(import.meta.url));
+
+const apiEndpoint = 'https://demo.parca.dev';
+
+const queryClient = new client.QueryServiceClient(
+  new GrpcWebFetchTransport({
+    baseUrl: `${apiEndpoint}/api`,
+  })
+);
+
+const populateDataIfNeeded = async (from, filename) => {
+  const filePath = path.join(DIR_NAME, filename);
+  if (Object.keys(await readFile(filePath)).length > 0) {
+    return;
+  }
+  const {response} = await queryClient.query({
+    options: {
+      oneofKind: 'merge',
+      merge: {
+        start: client.Timestamp.fromDate(from),
+        end: client.Timestamp.fromDate(new Date()),
+        query: 'parca_agent_cpu:samples:count:cpu:nanoseconds:delta{container="parca"}',
+      },
+    },
+    reportType: client.QueryRequest_ReportType.TOP,
+    mode: client.QueryRequest_Mode.MERGE,
+  });
+  if (response.report.oneofKind !== 'top') {
+    throw new Error('Expected topTable report');
+  }
+  await writeToFile(response.report.top, filePath);
+};
+
+const writeToFile = async (data, filename) => {
+  await fs.createFile(filename);
+  return await fs.writeFile(filename, JSON.stringify(data));
+};
+
+const readFile = async filename => {
+  try {
+    return await fs.readJSON(filename);
+  } catch (e) {
+    return {};
+  }
+};
+
+const run = async () => {
+  await Promise.all([
+    populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60), 'parca-toptable-1m.json'),
+    populateDataIfNeeded(
+      new Date(new Date().getTime() - 1000 * 60 * 10),
+      'parca-toptable-10m.json'
+    ),
+    populateDataIfNeeded(
+      new Date(new Date().getTime() - 1000 * 60 * 20),
+      'parca-toptable-20m.json'
+    ),
+  ]);
+};
+
+run()
+  .then(() => {
+    console.log('done');
+    process.exit(0);
+  })
+  .catch(err => {
+    console.error('Error:', err);
+    process.exit(1);
+  });

package/src/TopTable/index.tsx

@@ -0,0 +1,175 @@
+// 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 React, {useCallback, useMemo} from 'react';
+
+import {getLastItem, valueFormatter, isSearchMatch} from '@parca/functions';
+import {
+  useAppSelector,
+  selectCompareMode,
+  selectSearchNodeString,
+  setSearchNodeString,
+  useAppDispatch,
+} from '@parca/store';
+import {TopNode, TopNodeMeta, Top} from '@parca/client';
+import {Table} from '@parca/components';
+import {createColumnHelper, ColumnDef} from '@tanstack/react-table';
+
+import {hexifyAddress} from '../utils';
+
+import '../TopTable.styles.css';
+
+interface TopTableProps {
+  data?: Top;
+  sampleUnit: string;
+}
+
+export const RowLabel = (meta: TopNodeMeta | undefined): string => {
+  if (meta === undefined) return '<unknown>';
+  const mapping = `${
+    meta?.mapping?.file !== undefined && meta?.mapping?.file !== ''
+      ? `[${getLastItem(meta.mapping.file) ?? ''}]`
+      : ''
+  }`;
+  if (meta.function?.name !== undefined && meta.function?.name !== '')
+    return `${mapping} ${meta.function.name}`;
+
+  const address = hexifyAddress(meta.location?.address);
+  const fallback = `${mapping} ${address}`;
+
+  return fallback === '' ? '<unknown>' : fallback;
+};
+
+const columnHelper = createColumnHelper<TopNode>();
+
+const addPlusSign = (num: string): string => {
+  if (num.charAt(0) === '0' || num.charAt(0) === '-') {
+    return num;
+  }
+
+  return `+${num}`;
+};
+
+export const TopTable = ({data: top, sampleUnit: unit}: TopTableProps): JSX.Element => {
+  const currentSearchString = useAppSelector(selectSearchNodeString);
+  const compareMode = useAppSelector(selectCompareMode);
+  const dispatch = useAppDispatch();
+
+  const columns = React.useMemo(() => {
+    const cols: Array<ColumnDef<TopNode, any>> = [
+      columnHelper.accessor('meta', {
+        header: () => <span className="text-left">Name</span>,
+        cell: info => {
+          const meta = info.row.original.meta;
+          const name = RowLabel(meta);
+          return name;
+        },
+        sortingFn: (a, b) => {
+          const aName = RowLabel(a.original.meta);
+          const bName = RowLabel(b.original.meta);
+          return aName.localeCompare(bName);
+        },
+      }),
+      columnHelper.accessor('flat', {
+        header: () => 'Flat',
+        cell: info => valueFormatter(Number(info.getValue()), unit, 2),
+        size: 150,
+        meta: {
+          align: 'right',
+        },
+        sortDescFirst: true,
+      }),
+      columnHelper.accessor('cumulative', {
+        header: () => 'Cumulative',
+        cell: info => valueFormatter(Number(info.getValue()), unit, 2),
+        size: 150,
+        meta: {
+          align: 'right',
+        },
+        sortDescFirst: true,
+      }),
+    ];
+    if (compareMode) {
+      cols.push(
+        columnHelper.accessor('diff', {
+          header: () => 'Diff',
+          cell: info => addPlusSign(valueFormatter(Number(info.getValue()), unit, 2)),
+          size: 150,
+          meta: {
+            align: 'right',
+          },
+          sortDescFirst: true,
+        })
+      );
+    }
+    return cols;
+  }, [unit, compareMode]);
+
+  const selectSpan = useCallback(
+    (span: string): void => {
+      dispatch(setSearchNodeString(span.trim()));
+    },
+    [dispatch]
+  );
+
+  const onRowClick = useCallback(
+    (row: TopNode) => {
+      const meta = row.meta;
+      if (meta === undefined) {
+        return;
+      }
+      const name = RowLabel(meta);
+      selectSpan(name);
+    },
+    [selectSpan]
+  );
+
+  const shouldHighlightRow = useCallback(
+    (row: TopNode) => {
+      const meta = row.meta;
+      if (meta === undefined) return false;
+      const name = RowLabel(meta);
+      return isSearchMatch(currentSearchString, name);
+    },
+    [currentSearchString]
+  );
+
+  const enableHighlighting = useMemo(() => {
+    return currentSearchString != null && currentSearchString?.length > 0;
+  }, [currentSearchString]);
+
+  const initialSorting = useMemo(() => {
+    return [{id: compareMode ? 'diff' : 'cumulative', desc: true}];
+  }, [compareMode]);
+
+  const total = top != null ? top.list.length : 0;
+
+  if (total === 0) return <>Profile has no samples</>;
+
+  return (
+    <>
+      <div className="w-full font-robotoMono h-[80vh] overflow-scroll">
+        <Table
+          data={top?.list ?? []}
+          columns={columns}
+          initialSorting={initialSorting}
+          onRowClick={onRowClick}
+          enableHighlighting={enableHighlighting}
+          shouldHighlightRow={shouldHighlightRow}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TopTable;

package/src/components/ProfileShareButton/index.tsx

@@ -20,6 +20,7 @@ import ResultBox from './ResultBox';
 interface Props {
   queryRequest: QueryRequest;
   queryClient: QueryServiceClient;
+  disabled?: boolean;
 }
 
 interface ProfileShareModalProps {
@@ -117,12 +118,12 @@ const ProfileShareModal = ({
   );
 };
 
-const ProfileShareButton = ({queryRequest, queryClient}: Props): JSX.Element => {
+const ProfileShareButton = ({queryRequest, queryClient, disabled = false}: Props): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return (
     <>
-      <Button color="neutral" className="w-fit" onClick={() => setIsOpen(true)}>
+      <Button color="neutral" className="w-fit" onClick={() => setIsOpen(true)} disabled={disabled}>
         <Icon icon="ei:share-apple" width={20} />
       </Button>
       <ProfileShareModal

package/tsconfig.json

@@ -8,5 +8,12 @@
     "noEmit": false,
     "declaration": true
   },
-  "exclude": ["node_modules", "dist", "dist/**/*.d.ts", "**/*.test.ts", "**/*.benchmark.tsx"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "dist/**/*.d.ts",
+    "**/*.test.ts",
+    "**/*.benchmark.tsx",
+    "**/benchdata/**/*.*"
+  ]
 }

package/dist/TopTable.js

@@ -1,144 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, Fragment as _Fragment, 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 React from 'react';
-import { getLastItem, valueFormatter, isSearchMatch } from '@parca/functions';
-import { useAppSelector, selectCompareMode, selectSearchNodeString, setSearchNodeString, useAppDispatch, } from '@parca/store';
-import { hexifyAddress } from './utils';
-import './TopTable.styles.css';
-var Arrow = function (_a) {
-    var direction = _a.direction;
-    return (_jsx("svg", __assign({ className: "".concat(direction !== undefined ? 'fill-[#161616] dark:fill-[#ffffff]' : ''), fill: "#777d87", height: "10", viewBox: "0 0 11 10", width: "11", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { clipRule: "evenodd", d: "m.573997 0 5.000003 10 5-10h-9.999847z", fillRule: "evenodd" }) })));
-};
-var useSortableData = function (top, config) {
-    if (config === void 0) { config = {
-        key: 'cumulative',
-        direction: 'desc',
-    }; }
-    var _a = React.useState(config), sortConfig = _a[0], setSortConfig = _a[1];
-    var rawTableReport = top != null ? top.list : [];
-    var items = rawTableReport.map(function (node) {
-        var _a, _b;
-        return (__assign(__assign({}, node), { 
-            // Warning: string to number can overflow
-            // https://github.com/timostamm/protobuf-ts/blob/master/MANUAL.md#bigint-support
-            diff: Number(node.diff), cumulative: Number(node.cumulative), flat: Number(node.flat), name: (_b = (_a = node.meta) === null || _a === void 0 ? void 0 : _a.function) === null || _b === void 0 ? void 0 : _b.name }));
-    });
-    var sortedItems = React.useMemo(function () {
-        if (items.length === 0)
-            return;
-        var sortableItems = __spreadArray([], items, true);
-        if (sortConfig !== null) {
-            sortableItems.sort(function (a, b) {
-                var itemA = a[sortConfig.key];
-                var itemB = b[sortConfig.key];
-                if (itemA === undefined && itemB === undefined) {
-                    return 0;
-                }
-                if (itemA === undefined) {
-                    return sortConfig.direction === 'asc' ? -1 : 1;
-                }
-                if (itemB === undefined) {
-                    return sortConfig.direction === 'asc' ? 1 : -1;
-                }
-                if (itemA < itemB) {
-                    return sortConfig.direction === 'asc' ? -1 : 1;
-                }
-                if (itemA > itemB) {
-                    return sortConfig.direction === 'asc' ? 1 : -1;
-                }
-                return 0;
-            });
-        }
-        return sortableItems;
-    }, [items, sortConfig]);
-    var requestSort = function (key) {
-        var direction = 'desc';
-        if (sortConfig != null && sortConfig.key === key && sortConfig.direction === 'desc') {
-            direction = 'asc';
-        }
-        setSortConfig({ key: key, direction: direction });
-    };
-    return { items: sortedItems, requestSort: requestSort, sortConfig: sortConfig };
-};
-export var RowLabel = function (meta) {
-    var _a, _b, _c, _d, _e, _f;
-    if (meta === undefined)
-        return '<unknown>';
-    var mapping = "".concat(((_a = meta === null || meta === void 0 ? void 0 : meta.mapping) === null || _a === void 0 ? void 0 : _a.file) !== undefined && ((_b = meta === null || meta === void 0 ? void 0 : meta.mapping) === null || _b === void 0 ? void 0 : _b.file) !== ''
-        ? "[".concat((_c = getLastItem(meta.mapping.file)) !== null && _c !== void 0 ? _c : '', "]")
-        : '');
-    if (((_d = meta.function) === null || _d === void 0 ? void 0 : _d.name) !== undefined && ((_e = meta.function) === null || _e === void 0 ? void 0 : _e.name) !== '')
-        return "".concat(mapping, " ").concat(meta.function.name);
-    var address = hexifyAddress((_f = meta.location) === null || _f === void 0 ? void 0 : _f.address);
-    var fallback = "".concat(mapping, " ").concat(address);
-    return fallback === '' ? '<unknown>' : fallback;
-};
-export var TopTable = function (_a) {
-    var _b, _c, _d, _e;
-    var top = _a.data, sampleUnit = _a.sampleUnit;
-    var _f = useSortableData(top), items = _f.items, requestSort = _f.requestSort, sortConfig = _f.sortConfig;
-    var currentSearchString = useAppSelector(selectSearchNodeString);
-    var compareMode = useAppSelector(selectCompareMode);
-    var dispatch = useAppDispatch();
-    var unit = sampleUnit;
-    var total = top != null ? top.list.length : 0;
-    if (total === 0)
-        return _jsx(_Fragment, { children: "Profile has no samples" });
-    var getClassNamesFor = function (name) {
-        if (sortConfig == null) {
-            return;
-        }
-        return sortConfig.key === name ? sortConfig.direction : undefined;
-    };
-    var addPlusSign = function (num) {
-        if (num.charAt(0) === '0' || num.charAt(0) === '-') {
-            return num;
-        }
-        return "+".concat(num);
-    };
-    var selectSpan = function (span) {
-        dispatch(setSearchNodeString(span.trim()));
-    };
-    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "w-full font-robotoMono" }, { children: _jsxs("table", __assign({ className: "iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700", tabIndex: 1 }, { children: [_jsx("thead", __assign({ className: "bg-gray-50 dark:bg-gray-800" }, { children: _jsxs("tr", { children: [_jsxs("th", __assign({ className: "text-sm cursor-pointer pt-2 pb-2 pl-2", onClick: function () { return requestSort('name'); } }, { children: ["Name", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_b = getClassNamesFor('name')) !== null && _b !== void 0 ? _b : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('name') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 w-[150px]", onClick: function () { return requestSort('flat'); } }, { children: ["Flat", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_c = getClassNamesFor('flat')) !== null && _c !== void 0 ? _c : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('flat') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('cumulative'); } }, { children: ["Cumulative", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_d = getClassNamesFor('cumulative')) !== null && _d !== void 0 ? _d : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('cumulative') }) }))] })), compareMode && (_jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('diff'); } }, { children: ["Diff", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_e = getClassNamesFor('diff')) !== null && _e !== void 0 ? _e : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('diff') }) }))] })))] }) })), _jsx("tbody", __assign({ className: "bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700" }, { children: items === null || items === void 0 ? void 0 : items.map(function (report, index) {
-                            var name = RowLabel(report.meta);
-                            return (_jsxs("tr", __assign({ className: "hover:bg-[#62626212] dark:hover:bg-[#ffffff12] cursor-pointer", style: {
-                                    opacity: currentSearchString !== undefined &&
-                                        currentSearchString !== '' &&
-                                        !isSearchMatch(currentSearchString, name)
-                                        ? 0.5
-                                        : 1,
-                                }, onClick: function () { return selectSpan(name); } }, { children: [_jsx("td", __assign({ className: "text-xs py-1.5 pl-2" }, { children: name })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right" }, { children: valueFormatter(report.flat, unit, 2) })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: valueFormatter(report.cumulative, unit, 2) })), compareMode && (_jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: addPlusSign(valueFormatter(report.diff, unit, 2)) })))] }), index));
-                        }) }))] })) })) }));
-};
-export default TopTable;