Merge pull request #4955 from parca-dev/add-query-duration

ui: Add text showing the timeframe of the query

Author: yomete

ui/packages/shared/profile/src/ProfileSource.tsx

@@ -20,7 +20,7 @@ import {
   Timestamp,
 } from '@parca/client';
 import {Matcher, NewParser, ProfileType, Query} from '@parca/parser';
-import {formatDate} from '@parca/utilities';
+import {formatDate, formatDuration} from '@parca/utilities';
 
 export interface ProfileSource {
   QueryRequest: () => QueryRequest;
@@ -255,11 +255,13 @@ export class MergedProfileSource implements ProfileSource {
 
     let timePart = '';
     if (this.mergeFrom !== 0) {
-      timePart = ` from ${formatDate(
-        this.mergeFrom,
+      timePart = `over ${formatDuration({
+        milliseconds: this.mergeTo - this.mergeFrom,
+      })} from ${formatDate(this.mergeFrom, timeFormat(timezone), timezone)} to ${formatDate(
+        this.mergeTo,
         timeFormat(timezone),
         timezone
-      )} to ${formatDate(this.mergeTo, timeFormat(timezone), timezone)}`;
+      )}`;
     }
 
     return `merged profiles${queryPart}${timePart}`;