@parca/profile 0.16.75 → 0.16.77

package/CHANGELOG.md

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

package/dist/MatchersInput/index.js

@@ -23,11 +23,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useState, useEffect, useMemo, useRef } from 'react';
-import { Query } from '@parca/parser';
 import TextareaAutosize from 'react-textarea-autosize';
 import cx from 'classnames';
-import SuggestionsList, { Suggestion, Suggestions } from './SuggestionsList';
 import { useGrpcMetadata } from '@parca/components';
+import { sanitizeLabelValue } from '@parca/functions';
+import { Query } from '@parca/parser';
+import SuggestionsList, { Suggestion, Suggestions } from './SuggestionsList';
 export var useLabelNames = function (client) {
     var _a = useState(true), loading = _a[0], setLoading = _a[1];
     var _b = useState({}), result = _b[0], setResult = _b[1];
@@ -59,7 +60,9 @@ var MatchersInput = function (_a) {
             setLabelValuesLoading(true);
             call.response
                 .then(function (response) {
-                setLabelValues(response.labelValues);
+                // replace single `\` in the `labelValues` string with doubles `\\` if available.
+                var newValues = sanitizeLabelValue(response.labelValues);
+                setLabelValues(newValues);
             })
                 .catch(function () { return setLabelValues(null); })
                 .finally(function () { return setLabelValuesLoading(false); });

package/dist/MetricsGraph/index.js

@@ -41,7 +41,7 @@ import { timeFormat } from '..';
 import { cutToMaxStringLength } from '@parca/functions/string';
 import throttle from 'lodash.throttle';
 import { usePopper } from 'react-popper';
-import { valueFormatter, formatDate } from '@parca/functions';
+import { valueFormatter, formatDate, sanitizeHighlightedValues } from '@parca/functions';
 import { DateTimeRange } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
@@ -226,7 +226,8 @@ export var RawMetricsGraph = function (_a) {
     };
     var openClosestProfile = function () {
         if (highlighted != null) {
-            onSampleClick(Math.round(highlighted.timestamp), highlighted.value, highlighted.labels);
+            onSampleClick(Math.round(highlighted.timestamp), highlighted.value, sanitizeHighlightedValues(highlighted.labels) // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
+            );
         }
     };
     var onMouseUp = function (e) {

package/dist/ProfileSelector/index.js

@@ -84,7 +84,10 @@ var ProfileSelector = function (_a) {
         setNewQueryExpression(query.toString(), false);
     };
     var addLabelMatcher = function (key, value) {
-        var _a = Query.parse(queryExpressionString).setMatcher(key, value), newQuery = _a[0], changed = _a[1];
+        // When a user clicks on a label on the metrics graph tooltip,
+        // replace single `\` in the `value` string with doubles `\\` if available.
+        var newValue = value.includes('\\') ? value.replaceAll('\\', '\\\\') : value;
+        var _a = Query.parse(queryExpressionString).setMatcher(key, newValue), newQuery = _a[0], changed = _a[1];
         if (changed) {
             setNewQueryExpression(newQuery.toString(), false);
         }

package/dist/ProfileSource.js

@@ -60,7 +60,7 @@ var SingleProfileSelection = /** @class */ (function () {
     SingleProfileSelection.prototype.HistoryParams = function () {
         return {
             profile_name: this.profileName,
-            labels: this.labels.map(function (label) { return "".concat(label.name, "=").concat(label.value); }),
+            labels: this.labels.map(function (label) { return "".concat(label.name, "=").concat(encodeURIComponent(label.value)); }),
             time: this.time,
         };
     };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.75",
+  "version": "0.16.77",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.56",
-    "@parca/components": "^0.16.66",
+    "@parca/components": "^0.16.67",
     "@parca/dynamicsize": "^0.16.51",
-    "@parca/functions": "^0.16.52",
+    "@parca/functions": "^0.16.53",
     "@parca/parser": "^0.16.51",
     "@parca/store": "^0.16.50",
     "d3": "7.6.1",
@@ -42,5 +42,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "5261626b6eb672f049f3eb62f3bec65241aab90c"
+  "gitHead": "32660c63e7b5d189c3e29abb0321d8e49bbcbc28"
 }

package/src/MatchersInput/index.tsx

@@ -12,13 +12,15 @@
 // limitations under the License.
 
 import React, {useState, useEffect, useMemo, useRef} from 'react';
-import {Query} from '@parca/parser';
-import {LabelsResponse, QueryServiceClient} from '@parca/client';
 import TextareaAutosize from 'react-textarea-autosize';
 import cx from 'classnames';
 
-import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
 import {useGrpcMetadata} from '@parca/components';
+import {sanitizeLabelValue} from '@parca/functions';
+import {Query} from '@parca/parser';
+import {LabelsResponse, QueryServiceClient} from '@parca/client';
+
+import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
 
 interface MatchersInputProps {
   queryClient: QueryServiceClient;
@@ -79,7 +81,10 @@ const MatchersInput = ({
 
       call.response
         .then(response => {
-          setLabelValues(response.labelValues);
+          // replace single `\` in the `labelValues` string with doubles `\\` if available.
+          const newValues = sanitizeLabelValue(response.labelValues);
+
+          setLabelValues(newValues);
         })
         .catch(() => setLabelValues(null))
         .finally(() => setLabelValuesLoading(false));

package/src/MetricsGraph/index.tsx

@@ -21,7 +21,7 @@ import throttle from 'lodash.throttle';
 import {MetricsSeries as MetricsSeriesPb, MetricsSample, Label} from '@parca/client';
 import {usePopper} from 'react-popper';
 import type {VirtualElement} from '@popperjs/core';
-import {valueFormatter, formatDate} from '@parca/functions';
+import {valueFormatter, formatDate, sanitizeHighlightedValues} from '@parca/functions';
 import {DateTimeRange} from '@parca/components';
 import {useContainerDimensions} from '@parca/dynamicsize';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
@@ -362,7 +362,11 @@ export const RawMetricsGraph = ({
 
   const openClosestProfile = (): void => {
     if (highlighted != null) {
-      onSampleClick(Math.round(highlighted.timestamp), highlighted.value, highlighted.labels);
+      onSampleClick(
+        Math.round(highlighted.timestamp),
+        highlighted.value,
+        sanitizeHighlightedValues(highlighted.labels) // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
+      );
     }
   };
 

package/src/ProfileSelector/index.tsx

@@ -138,7 +138,10 @@ const ProfileSelector = ({
   };
 
   const addLabelMatcher = (key: string, value: string): void => {
-    const [newQuery, changed] = Query.parse(queryExpressionString).setMatcher(key, value);
+    // When a user clicks on a label on the metrics graph tooltip,
+    // replace single `\` in the `value` string with doubles `\\` if available.
+    const newValue = value.includes('\\') ? value.replaceAll('\\', '\\\\') : value;
+    const [newQuery, changed] = Query.parse(queryExpressionString).setMatcher(key, newValue);
     if (changed) {
       setNewQueryExpression(newQuery.toString(), false);
     }

package/src/ProfileSource.tsx

@@ -113,7 +113,7 @@ export class SingleProfileSelection implements ProfileSelection {
   HistoryParams(): {[key: string]: any} {
     return {
       profile_name: this.profileName,
-      labels: this.labels.map(label => `${label.name}=${label.value}`),
+      labels: this.labels.map(label => `${label.name}=${encodeURIComponent(label.value)}`),
       time: this.time,
     };
   }