@parca/profile 0.7.10

package/src/ProfileSource.tsx

@@ -0,0 +1,327 @@
+import React from 'react';
+import moment from 'moment';
+import {Query} from '@parca/parser';
+import {
+  Label,
+  QueryRequest,
+  ProfileDiffSelection,
+  SingleProfile,
+  MergeProfile,
+  DiffProfile,
+} from '@parca/client';
+import {Timestamp} from 'google-protobuf/google/protobuf/timestamp_pb';
+
+export interface ProfileSource {
+  QueryRequest: () => QueryRequest;
+  DiffSelection: () => ProfileDiffSelection;
+  Describe: () => JSX.Element;
+  toString: () => string;
+}
+
+export interface ProfileSelection {
+  ProfileName: () => string;
+  HistoryParams: () => {[key: string]: any};
+  ProfileSource: () => ProfileSource;
+  Type: () => string;
+}
+
+export const timeFormat = 'MMM D, [at] h:mm:s a [(UTC)]';
+export const timeFormatShort = 'MMM D, h:mma';
+
+export function ParamsString(params: {[key: string]: string}): string {
+  return Object.keys(params)
+    .map(function (key) {
+      return `${key}=${params[key]}`;
+    })
+    .join('&');
+}
+
+export function SuffixParams(params: {[key: string]: any}, suffix: string): {[key: string]: any} {
+  return Object.fromEntries(
+    Object.entries(params).map(([key, value]) => [`${key}${suffix}`, value])
+  );
+}
+
+export function ParseLabels(labels: string[]): Label.AsObject[] {
+  return labels.map(function (labelString): Label.AsObject {
+    const parts = labelString.split('=', 2);
+    return {name: parts[0], value: parts[1]};
+  });
+}
+
+export function ProfileSelectionFromParams(
+  expression: string | undefined,
+  from: string | undefined,
+  to: string | undefined,
+  merge: string | undefined,
+  labels: string[] | undefined,
+  time: string | undefined
+): ProfileSelection | null {
+  if (
+    merge !== undefined &&
+    merge === 'true' &&
+    from !== undefined &&
+    to !== undefined &&
+    expression !== undefined
+  ) {
+    return new MergedProfileSelection(parseInt(from), parseInt(to), expression);
+  }
+  if (labels !== undefined && time !== undefined) {
+    return new SingleProfileSelection(ParseLabels(labels), parseInt(time));
+  }
+  return null;
+}
+
+export class SingleProfileSelection implements ProfileSelection {
+  labels: Label.AsObject[];
+  time: number;
+
+  constructor(labels: Label.AsObject[], time: number) {
+    this.labels = labels;
+    this.time = time;
+  }
+
+  ProfileName(): string {
+    const label = this.labels.find(e => e.name === '__name__');
+    return label !== undefined ? label.value : '';
+  }
+
+  HistoryParams(): {[key: string]: any} {
+    return {
+      labels: this.labels.map(label => `${label.name}=${label.value}`),
+      time: this.time,
+    };
+  }
+
+  Type(): string {
+    return 'single';
+  }
+
+  ProfileSource(): ProfileSource {
+    return new SingleProfileSource(this.labels, this.time);
+  }
+}
+
+export class MergedProfileSelection implements ProfileSelection {
+  from: number;
+  to: number;
+  query: string;
+
+  constructor(from: number, to: number, query: string) {
+    this.from = from;
+    this.to = to;
+    this.query = query;
+  }
+
+  ProfileName(): string {
+    return Query.parse(this.query).profileName();
+  }
+
+  HistoryParams(): {[key: string]: string} {
+    return {
+      mode: 'merge',
+      from: this.from.toString(),
+      to: this.to.toString(),
+      query: this.query,
+    };
+  }
+
+  Type(): string {
+    return 'merge';
+  }
+
+  ProfileSource(): ProfileSource {
+    return new MergedProfileSource(this.from, this.to, this.query);
+  }
+}
+
+export class SingleProfileSource implements ProfileSource {
+  labels: Label.AsObject[];
+  time: number;
+
+  constructor(labels: Label.AsObject[], time: number) {
+    this.labels = labels;
+    this.time = time;
+  }
+
+  query(): string {
+    const seriesQuery = this.labels.reduce(function (agg: string, label: Label.AsObject) {
+      return agg + `${label.name}="${label.value}",`;
+    }, '{');
+    return seriesQuery + '}';
+  }
+
+  DiffSelection(): ProfileDiffSelection {
+    const sel = new ProfileDiffSelection();
+    sel.setMode(ProfileDiffSelection.Mode.MODE_SINGLE_UNSPECIFIED);
+
+    const singleProfile = new SingleProfile();
+    const ts = new Timestamp();
+    ts.fromDate(moment(this.time).toDate());
+    singleProfile.setTime(ts);
+    singleProfile.setQuery(this.query());
+    sel.setSingle(singleProfile);
+
+    return sel;
+  }
+
+  QueryRequest(): QueryRequest {
+    const req = new QueryRequest();
+    req.setMode(QueryRequest.Mode.MODE_SINGLE_UNSPECIFIED);
+    const singleQueryRequest = new SingleProfile();
+    const ts = new Timestamp();
+    ts.fromDate(moment(this.time).toDate());
+    singleQueryRequest.setTime(ts);
+    singleQueryRequest.setQuery(this.query());
+    req.setSingle(singleQueryRequest);
+    return req;
+  }
+
+  profileName(): string {
+    const label = this.labels.find(e => e.name === '__name__');
+    return label !== undefined ? label.value : '';
+  }
+
+  Describe(): JSX.Element {
+    const profileName = this.profileName();
+    return (
+      <>
+        <p>
+          {profileName !== '' ? <a>{profileName} profile of </a> : ''}
+          {'  '}
+          {this.labels
+            .filter(label => label.name !== '__name__')
+            .map(label => (
+              <button
+                key={label.name}
+                type="button"
+                className="inline-block rounded-lg text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400 px-2 py-1 text-xs font-bold mr-3"
+              >
+                {`${label.name}="${label.value}"`}
+              </button>
+            ))}
+        </p>
+        <p>{moment(this.time).utc().format(timeFormat)}</p>
+      </>
+    );
+  }
+
+  stringLabels(): string[] {
+    return this.labels
+      .filter((label: Label.AsObject) => label.name !== '__name__')
+      .map((label: Label.AsObject) => `${label.name}=${label.value}`);
+  }
+
+  toString(): string {
+    return `single profile of type ${this.profileName()} with labels ${this.stringLabels().join(
+      ', '
+    )} collected at ${moment(this.time).utc().format(timeFormat)}`;
+  }
+}
+
+export class ProfileDiffSource implements ProfileSource {
+  a: ProfileSource;
+  b: ProfileSource;
+
+  constructor(a: ProfileSource, b: ProfileSource) {
+    this.a = a;
+    this.b = b;
+  }
+
+  DiffSelection(): ProfileDiffSelection {
+    return new ProfileDiffSelection();
+  }
+
+  QueryRequest(): QueryRequest {
+    const req = new QueryRequest();
+    req.setMode(QueryRequest.Mode.MODE_DIFF);
+    const diffQueryRequest = new DiffProfile();
+
+    diffQueryRequest.setA(this.a.DiffSelection());
+    diffQueryRequest.setB(this.b.DiffSelection());
+
+    req.setDiff(diffQueryRequest);
+    return req;
+  }
+
+  Describe(): JSX.Element {
+    return (
+      <>
+        <p>Browse the comparison</p>
+      </>
+    );
+  }
+
+  toString(): string {
+    return `${this.a.toString()} compared with ${this.b.toString()}`;
+  }
+}
+
+export class MergedProfileSource implements ProfileSource {
+  from: number;
+  to: number;
+  query: string;
+
+  constructor(from: number, to: number, query: string) {
+    this.from = from;
+    this.to = to;
+    this.query = query;
+  }
+
+  DiffSelection(): ProfileDiffSelection {
+    const sel = new ProfileDiffSelection();
+    sel.setMode(ProfileDiffSelection.Mode.MODE_MERGE);
+
+    const mergeProfile = new MergeProfile();
+
+    const startTs = new Timestamp();
+    startTs.fromDate(moment(this.from).toDate());
+    mergeProfile.setStart(startTs);
+
+    const endTs = new Timestamp();
+    endTs.fromDate(moment(this.to).toDate());
+    mergeProfile.setEnd(endTs);
+
+    mergeProfile.setQuery(this.query);
+
+    sel.setMerge(mergeProfile);
+
+    return sel;
+  }
+
+  QueryRequest(): QueryRequest {
+    const req = new QueryRequest();
+    req.setMode(QueryRequest.Mode.MODE_MERGE);
+
+    const mergeQueryRequest = new MergeProfile();
+
+    const startTs = new Timestamp();
+    startTs.fromDate(moment(this.from).toDate());
+    mergeQueryRequest.setStart(startTs);
+
+    const endTs = new Timestamp();
+    endTs.fromDate(moment(this.to).toDate());
+    mergeQueryRequest.setEnd(endTs);
+
+    mergeQueryRequest.setQuery(this.query);
+
+    req.setMerge(mergeQueryRequest);
+
+    return req;
+  }
+
+  Describe(): JSX.Element {
+    return (
+      <a>
+        Merge of "{this.query}" from {moment(this.from).utc().format(timeFormat)} to{' '}
+        {moment(this.to).utc().format(timeFormat)}
+      </a>
+    );
+  }
+
+  toString(): string {
+    return `merged profiles of query "${this.query}" from ${moment(this.from)
+      .utc()
+      .format(timeFormat)} to ${moment(this.to).utc().format(timeFormat)}`;
+  }
+}

package/src/ProfileView.tsx

@@ -0,0 +1,164 @@
+import React, {useEffect, useState, useRef} from 'react';
+// import ProfileSVG from './ProfileSVG'
+// import ProfileTop from './ProfileTop'
+import {CalcWidth} from '@parca/dynamicsize';
+import ProfileIcicleGraph from './ProfileIcicleGraph';
+import {ProfileSource} from './ProfileSource';
+import {QueryRequest, QueryResponse, QueryServiceClient, ServiceError} from '@parca/client';
+import Card from '../../../app/web/src/components/ui/Card';
+import Button from '@parca/web/src/components/ui/Button';
+import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
+
+interface ProfileViewProps {
+  queryClient: QueryServiceClient;
+  profileSource: ProfileSource;
+}
+
+export interface IQueryResult {
+  response: QueryResponse | null;
+  error: ServiceError | null;
+}
+
+function arrayEquals(a, b): boolean {
+  return (
+    Array.isArray(a) &&
+    Array.isArray(b) &&
+    a.length === b.length &&
+    a.every((val, index) => val === b[index])
+  );
+}
+
+export const useQuery = (
+  client: QueryServiceClient,
+  profileSource: ProfileSource
+): IQueryResult => {
+  const [result, setResult] = useState<IQueryResult>({
+    response: null,
+    error: null,
+  });
+
+  useEffect(() => {
+    const req = profileSource.QueryRequest();
+    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_FLAMEGRAPH_UNSPECIFIED);
+
+    client.query(req, (error: ServiceError | null, responseMessage: QueryResponse | null) => {
+      setResult({
+        response: responseMessage,
+        error: error,
+      });
+    });
+  }, [client, profileSource]);
+
+  return result;
+};
+
+export const ProfileView = ({queryClient, profileSource}: ProfileViewProps): JSX.Element => {
+  const [curPath, setCurPath] = useState<string[]>([]);
+  const {response, error} = useQuery(queryClient, profileSource);
+
+  if (error != null) {
+    return <div className="p-10 flex justify-center">An error occurred: {error.message}</div>;
+  }
+
+  if (response == null) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: 'inherit',
+          marginTop: 100,
+        }}
+      >
+        <svg
+          className="animate-spin -ml-1 mr-3 h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        <span>Loading...</span>
+      </div>
+    );
+  }
+
+  const downloadPProf = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+
+    const req = profileSource.QueryRequest();
+    req.setReportType(QueryRequest.ReportType.REPORT_TYPE_PPROF_UNSPECIFIED);
+
+    queryClient.query(
+      req,
+      (
+        error: ServiceError | null,
+        responseMessage: parca_query_v1alpha1_query_pb.QueryResponse | null
+      ) => {
+        if (responseMessage !== null) {
+          const bytes = responseMessage.getPprof();
+          const blob = new Blob([bytes], {type: 'application/octet-stream'});
+
+          const link = document.createElement('a');
+          link.href = window.URL.createObjectURL(blob);
+          link.download = 'profile.pb.gz';
+          link.click();
+        }
+      }
+    );
+  };
+
+  const resetIcicleGraph = (e: React.MouseEvent<HTMLElement>) => {
+    setCurPath([]);
+  };
+
+  const setNewCurPath = (path: string[]) => {
+    if (!arrayEquals(curPath, path)) {
+      setCurPath(path);
+    }
+  };
+
+  return (
+    <>
+      <div className="py-3">
+        <Card>
+          <Card.Body>
+            <div className="flex space-x-4 py-3">
+              <div className="w-1/4">
+                <Button color="neutral" onClick={resetIcicleGraph} disabled={curPath.length === 0}>
+                  Reset View
+                </Button>
+              </div>
+
+              <div className="w-full" />
+              <div className="w-full" />
+              <Button color="neutral" onClick={downloadPProf}>
+                Download pprof
+              </Button>
+            </div>
+            <CalcWidth throttle={300} delay={2000}>
+              <ProfileIcicleGraph
+                curPath={curPath}
+                setNewCurPath={setNewCurPath}
+                graph={response.getFlamegraph()?.toObject()}
+              />
+            </CalcWidth>
+          </Card.Body>
+        </Card>
+      </div>
+    </>
+  );
+};

package/src/__tests__/suffix_params.test.ts

@@ -0,0 +1,11 @@
+import {SuffixParams, ParseLabels} from '../ProfileSource';
+
+test('prefixes keys', () => {
+  const input = {key: 'value'};
+  expect(SuffixParams(input, '_a')).toMatchObject({key_a: 'value'});
+});
+
+test('parses labels', () => {
+  const input = ['key=value'];
+  expect(ParseLabels(input)).toMatchObject([{name: 'key', value: 'value'}]);
+});

package/src/index.tsx

@@ -0,0 +1,4 @@
+export * from './IcicleGraph';
+export * from './ProfileIcicleGraph';
+export * from './ProfileSource';
+export * from './ProfileView';