@parca/profile 0.13.13 → 0.13.15

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.13.15](https://github.com/parca-dev/parca/compare/ui-v0.13.14...ui-v0.13.15) (2022-07-12)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.13.13](https://github.com/parca-dev/parca/compare/ui-v0.13.12...ui-v0.13.13) (2022-06-29)
 
 **Note:** Version bump only for package @parca/profile

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.13.13",
+  "version": "0.13.15",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.13.13",
+    "@iconify/react": "^3.2.2",
+    "@parca/client": "^0.13.15",
     "@parca/dynamicsize": "^0.13.0",
     "@parca/parser": "^0.13.13",
-    "d3-scale": "^4.0.2"
+    "d3-scale": "^4.0.2",
+    "react-copy-to-clipboard": "^5.1.0"
   },
   "main": "src/index.tsx",
   "scripts": {
@@ -19,5 +21,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "843f14d7aba3e60c38a040ddbe59d98d84648a41"
+  "gitHead": "f069ec81f844a6b5bdac6530f5e8eaaee26265aa"
 }

package/src/ProfileView.tsx

@@ -3,10 +3,12 @@ import {parseParams} from '@parca/functions';
 import {QueryServiceClient, QueryRequest_ReportType} from '@parca/client';
 import {Button, Card, SearchNodes, useGrpcMetadata, useParcaTheme} from '@parca/components';
 
+import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
 import {useQuery} from './useQuery';
 import TopTable from './TopTable';
+import {downloadPprof} from './utils';
 
 import './ProfileView.styles.css';
 
@@ -67,31 +69,18 @@ export const ProfileView = ({
     return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
   }
 
-  const downloadPProf = (e: React.MouseEvent<HTMLElement>) => {
+  const downloadPProf = async (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
 
-    const req = {
-      ...profileSource.QueryRequest(),
-      reportType: QueryRequest_ReportType.PPROF,
-    };
-
-    queryClient
-      .query(req, {meta: metadata})
-      .response.then(response => {
-        if (response.report.oneofKind !== 'pprof') {
-          console.log('Expected pprof report, got:', response.report.oneofKind);
-          return;
-        }
-        const blob = new Blob([response.report.pprof], {type: 'application/octet-stream'});
-
-        const link = document.createElement('a');
-        link.href = window.URL.createObjectURL(blob);
-        link.download = 'profile.pb.gz';
-        link.click();
-      })
-      .catch(error => {
-        console.error('Error while querying', error);
-      });
+    try {
+      const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
+      const link = document.createElement('a');
+      link.href = window.URL.createObjectURL(blob);
+      link.download = 'profile.pb.gz';
+      link.click();
+    } catch (error) {
+      console.error('Error while querying', error);
+    }
   };
 
   const resetIcicleGraph = () => setCurPath([]);
@@ -119,7 +108,12 @@ export const ProfileView = ({
           <Card.Body>
             <div className="flex py-3 w-full">
               <div className="w-2/5 flex space-x-4">
-                <div>
+                <div className="flex space-x-1">
+                  <ProfileShareButton
+                    queryRequest={profileSource.QueryRequest()}
+                    queryClient={queryClient}
+                  />
+
                   <Button color="neutral" onClick={downloadPProf}>
                     Download pprof
                   </Button>

package/src/components/ProfileShareButton/ResultBox.tsx

@@ -0,0 +1,49 @@
+import {useState} from 'react';
+import cx from 'classnames';
+import {Icon} from '@iconify/react';
+import {Button} from '@parca/components';
+import {CopyToClipboard} from 'react-copy-to-clipboard';
+
+interface Props {
+  value: string;
+  className?: string;
+}
+
+let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
+
+const ResultBox = ({value, className = ''}: Props) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const onCopy = () => {
+    setIsCopied(true);
+    (window.document?.activeElement as HTMLElement)?.blur();
+    if (timeoutHandle != null) {
+      clearTimeout(timeoutHandle);
+    }
+    timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
+  };
+
+  return (
+    <div className={cx('flex flex-row w-full', {[className]: className?.length > 0})}>
+      <span className="flex justify-center items-center border border-r-0 w-16 rounded-l">
+        <Icon icon="ant-design:link-outlined" />
+      </span>
+      <input
+        type="text"
+        className="border text-sm bg-inherit w-full px-1 py-2 flex-grow"
+        value={value}
+        readOnly
+      />
+      <CopyToClipboard text={value} onCopy={onCopy}>
+        <Button
+          variant="link"
+          className="border border-l-0 w-fit whitespace-nowrap p-4 items-center !text-indigo-600 dark:!text-indigo-400 rounded-none rounded-r"
+        >
+          {isCopied ? 'Copied!' : 'Copy Link'}
+        </Button>
+      </CopyToClipboard>
+    </div>
+  );
+};
+
+export default ResultBox;

package/src/components/ProfileShareButton/index.tsx

@@ -0,0 +1,117 @@
+import {useState} from 'react';
+import {Button, Modal} from '@parca/components';
+import {Icon} from '@iconify/react';
+import {QueryRequest, QueryServiceClient} from '@parca/client';
+import ResultBox from './ResultBox';
+
+interface Props {
+  queryRequest: QueryRequest;
+  queryClient: QueryServiceClient;
+}
+
+interface ProfileShareModalProps {
+  queryRequest: QueryRequest;
+  queryClient: QueryServiceClient;
+  isOpen: boolean;
+  closeModal: () => void;
+}
+
+const ProfileShareModal = ({
+  isOpen,
+  closeModal,
+  queryRequest,
+  queryClient,
+}: ProfileShareModalProps) => {
+  const [isShared, setIsShared] = useState(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [sharedLink, setSharedLink] = useState<string>('');
+  const isFormDataValid = () => true;
+
+  const handleSubmit: () => void = async () => {
+    try {
+      setLoading(true);
+      const {response} = await queryClient.shareProfile({queryRequest, description});
+      setSharedLink(response.link);
+      setLoading(false);
+      setIsShared(true);
+    } catch (err) {
+      console.error(err);
+      setLoading(false);
+      setError(err.toString());
+    }
+  };
+
+  const onClose = () => {
+    setLoading(false);
+    setError('');
+    setDescription('');
+    setIsShared(false);
+    closeModal();
+  };
+
+  return (
+    <Modal isOpen={isOpen} closeModal={onClose} title="Share Profile" className="w-[420px]">
+      <form className="py-2">
+        <p className="text-sm text-gray-500 dark:text-gray-300">
+          Note: Shared profiles can be accessed by anyone with the link, even from people outside
+          your organisation.
+        </p>
+        {!isShared || error?.length > 0 ? (
+          <>
+            <p className="text-sm text-gray-500 dark:text-gray-300 mt-3 mb-2">
+              Enter a description (optional)
+            </p>
+            <textarea
+              className="border w-full text-gray-500 dark:text-gray-300 bg-inherit text-sm px-2 py-2"
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+            ></textarea>
+            <Button
+              className="w-fit mt-4"
+              onClick={e => {
+                e.preventDefault();
+                handleSubmit();
+              }}
+              disabled={loading || !isFormDataValid()}
+              type="submit"
+            >
+              {loading ? 'Sharing' : 'Share'}
+            </Button>
+            {error !== '' ? <p>Something went wrong please try again</p> : null}
+          </>
+        ) : (
+          <>
+            <ResultBox value={sharedLink} className="mt-4" />
+            <div className="flex justify-center mt-8">
+              <Button variant="neutral" className="w-fit" onClick={onClose}>
+                Close
+              </Button>
+            </div>
+          </>
+        )}
+      </form>
+    </Modal>
+  );
+};
+
+const ProfileShareButton = ({queryRequest, queryClient}: Props) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <Button color="neutral" className="w-fit" onClick={() => setIsOpen(true)}>
+        <Icon icon="ei:share-apple" width={20} />
+      </Button>
+      <ProfileShareModal
+        isOpen={isOpen}
+        closeModal={() => setIsOpen(false)}
+        queryRequest={queryRequest}
+        queryClient={queryClient}
+      />
+    </>
+  );
+};
+
+export default ProfileShareButton;

package/src/utils.ts

@@ -1,6 +1,31 @@
+import {QueryRequest, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
+import {RpcMetadata} from '@protobuf-ts/runtime-rpc';
+
 export const hexifyAddress = (address?: string): string => {
   if (address == null) {
     return '';
   }
   return `0x${parseInt(address, 10).toString(16)}`;
 };
+
+export const downloadPprof = async (
+  request: QueryRequest,
+  queryClient: QueryServiceClient,
+  metadata: RpcMetadata
+) => {
+  const req = {
+    ...request,
+    reportType: QueryRequest_ReportType.PPROF,
+  };
+
+  const {response} = await queryClient.query(req, {meta: metadata});
+  if (response.report.oneofKind !== 'pprof') {
+    throw new Error(
+      `Expected pprof report, got: ${
+        response.report.oneofKind !== undefined ? response.report.oneofKind : 'undefined'
+      }`
+    );
+  }
+  const blob = new Blob([response.report.pprof], {type: 'application/octet-stream'});
+  return blob;
+};