@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/TelemetryViewer/components/LockedFilterChip.tsx

@@ -18,6 +18,16 @@ import {
   TELEMETRY_EXPLORER_LABELS,
   TelemetrySignal,
 } from "../../../../Utils/Telemetry/LockedFilterSearch";
+import {
+  PluralTemplate,
+  TemplateValues,
+  translatableTerm,
+  translatePlural,
+  translateTemplate,
+  Translator,
+  translationKey,
+} from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 
 /*
  * The grey lock chip every telemetry explorer shows for a filter its host
@@ -44,16 +54,41 @@ export const COPIED_FEEDBACK_MS: number = 1500;
 export const LOCKED_FILTER_CHIP_CLASS_NAME: string =
   "inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700";
 
-export const COPIED_SEARCH_SYNTAX_ANNOUNCEMENT: string = "Copied search syntax";
-export const COPY_FAILED_ANNOUNCEMENT: string = "Copy failed";
+export const COPIED_SEARCH_SYNTAX_ANNOUNCEMENT: string = translationKey(
+  "Copied search syntax",
+);
+export const COPY_FAILED_ANNOUNCEMENT: string = translationKey("Copy failed");
 
 /** Shown in the tooltip when a detail names neither a token nor a reason. */
-export const NO_SEARCH_SYNTAX_REASON: string =
-  "This filter has no search syntax.";
+export const NO_SEARCH_SYNTAX_REASON: string = translationKey(
+  "This filter has no search syntax.",
+);
 
 /** A scope chip's opening line when its builder gave none. */
-export const DEFAULT_SCOPE_SUMMARY: string =
-  "This page only shows telemetry that matches any of these:";
+export const DEFAULT_SCOPE_SUMMARY: string = translationKey(
+  "This page only shows telemetry that matches any of these:",
+);
+
+/*
+ * The chip's accessible name, one whole sentence per case: with or without
+ * the scope's value count, and with the Enter hint when there is syntax to
+ * copy.
+ */
+const LOCKED_FILTER_LABEL: string = translationKey(
+  "{{key}}: {{value}}, locked filter",
+);
+const LOCKED_FILTER_LABEL_WITH_COPY_HINT: string = translationKey(
+  "{{key}}: {{value}}, locked filter. Press Enter to copy its search syntax.",
+);
+const SCOPED_LOCKED_FILTER_LABEL: PluralTemplate = {
+  one: "{{key}}: {{value}}, locked filter matching any of {{count}} value",
+  other: "{{key}}: {{value}}, locked filter matching any of {{count}} values",
+};
+const SCOPED_LOCKED_FILTER_LABEL_WITH_COPY_HINT: PluralTemplate = {
+  one: "{{key}}: {{value}}, locked filter matching any of {{count}} value. Press Enter to copy its search syntax.",
+  other:
+    "{{key}}: {{value}}, locked filter matching any of {{count}} values. Press Enter to copy its search syntax.",
+};
 
 type GetScopeMatchesFunction = (
   detail: LockedFilterDetail | undefined,
@@ -143,19 +178,25 @@ export const getLockedFilterChipAriaLabel: GetLockedFilterChipAriaLabelFunction
     hasSearchToken?: boolean | undefined,
     scopeValueCount?: number | undefined,
   ): string => {
-    let base: string = `${displayKey}: ${displayValue}, locked filter`;
+    const values: TemplateValues = {
+      key: translatableTerm(displayKey),
+      value: displayValue,
+    };
 
     if (scopeValueCount && scopeValueCount > 0) {
-      base = `${base} matching any of ${scopeValueCount} ${
-        scopeValueCount === 1 ? "value" : "values"
-      }`;
-    }
-
-    if (!hasSearchToken) {
-      return base;
+      return translatePlural(
+        hasSearchToken
+          ? SCOPED_LOCKED_FILTER_LABEL_WITH_COPY_HINT
+          : SCOPED_LOCKED_FILTER_LABEL,
+        scopeValueCount,
+        values,
+      );
     }
 
-    return `${base}. Press Enter to copy its search syntax.`;
+    return translateTemplate(
+      hasSearchToken ? LOCKED_FILTER_LABEL_WITH_COPY_HINT : LOCKED_FILTER_LABEL,
+      values,
+    );
   };
 
 export interface CopiedFeedback {
@@ -231,23 +272,25 @@ interface SearchSyntaxRowProps {
 
 type CopyButtonLabelFunction = (feedback: CopiedFeedback) => string;
 
+// English, looked up where the button shows it.
 const copyButtonText: CopyButtonLabelFunction = (
   feedback: CopiedFeedback,
 ): string => {
   if (feedback.copied) {
-    return "Copied!";
+    return translationKey("Copied!");
   }
 
   if (feedback.failed) {
-    return "Copy failed";
+    return translationKey("Copy failed");
   }
 
-  return "Copy";
+  return translationKey("Copy");
 };
 
 const SearchSyntaxRow: FunctionComponent<SearchSyntaxRowProps> = (
   props: SearchSyntaxRowProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const feedback: CopiedFeedback = useCopiedFeedback();
 
   const explorerLabel: string | undefined = props.signal
@@ -271,13 +314,13 @@ const SearchSyntaxRow: FunctionComponent<SearchSyntaxRowProps> = (
         </code>
         <button
           type="button"
-          aria-label={
+          aria-label={translator.translateText(
             feedback.copied
               ? "Copied"
               : feedback.failed
                 ? "Copy failed"
-                : "Copy search syntax"
-          }
+                : "Copy search syntax",
+          )}
           className={`inline-flex h-6 shrink-0 items-center gap-1 rounded border px-1.5 text-[11px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 ${buttonClassName}`}
           onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
             /*
@@ -299,13 +342,16 @@ const SearchSyntaxRow: FunctionComponent<SearchSyntaxRowProps> = (
             }
             className="h-3 w-3"
           />
-          <span>{copyButtonText(feedback)}</span>
+          <span>{translator.translateText(copyButtonText(feedback))}</span>
         </button>
       </div>
       <p className="text-[11px] text-gray-400">
         {explorerLabel
-          ? `Paste into the ${explorerLabel} explorer search bar.`
-          : "Paste into the explorer search bar."}
+          ? translator.translateTemplate(
+              "Paste into the {{explorer}} explorer search bar.",
+              { explorer: translatableTerm(explorerLabel) },
+            )
+          : translator.translateText("Paste into the explorer search bar.")}
       </p>
     </div>
   );
@@ -325,13 +371,15 @@ interface ScopeMatchesSectionProps {
 const ScopeMatchesSection: FunctionComponent<ScopeMatchesSectionProps> = (
   props: ScopeMatchesSectionProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
+
   return (
     <div className="space-y-2" data-testid="locked-filter-scope">
       <p
         className="text-[11px] text-gray-600"
         data-testid="locked-filter-scope-summary"
       >
-        {props.summary || DEFAULT_SCOPE_SUMMARY}
+        {translator.translateText(props.summary || DEFAULT_SCOPE_SUMMARY)}
       </p>
       <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
         {props.matches.map((match: LockedFilterScopeMatch) => {
@@ -343,7 +391,7 @@ const ScopeMatchesSection: FunctionComponent<ScopeMatchesSectionProps> = (
             >
               <div className="flex items-baseline justify-between gap-2">
                 <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-500">
-                  {match.label}
+                  {translator.translateText(match.label)}
                 </span>
                 <span
                   className="text-[10px] tabular-nums text-gray-400"
@@ -353,7 +401,9 @@ const ScopeMatchesSection: FunctionComponent<ScopeMatchesSectionProps> = (
                 </span>
               </div>
               {match.description ? (
-                <p className="text-[11px] text-gray-400">{match.description}</p>
+                <p className="text-[11px] text-gray-400">
+                  {translator.translateText(match.description)}
+                </p>
               ) : (
                 <></>
               )}
@@ -391,6 +441,7 @@ const ScopeMatchesSection: FunctionComponent<ScopeMatchesSectionProps> = (
 export const LockedFilterTooltipContent: FunctionComponent<
   LockedFilterTooltipContentProps
 > = (props: LockedFilterTooltipContentProps): ReactElement => {
+  const translator: Translator = useTranslator();
   const detail: LockedFilterDetail = props.lockedDetail;
   const scopeMatches: Array<LockedFilterScopeMatch> =
     getLockedFilterScopeMatches(detail);
@@ -408,7 +459,7 @@ export const LockedFilterTooltipContent: FunctionComponent<
         {detail.searchToken ? (
           <div className="space-y-1 border-t border-gray-100 pt-2">
             <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
-              Search syntax
+              {translator.translateText("Search syntax")}
             </div>
             <SearchSyntaxRow
               searchToken={detail.searchToken}
@@ -428,7 +479,7 @@ export const LockedFilterTooltipContent: FunctionComponent<
       data-testid="locked-filter-tooltip"
     >
       <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
-        Search syntax
+        {translator.translateText("Search syntax")}
       </div>
       {detail.searchToken ? (
         <SearchSyntaxRow
@@ -437,7 +488,9 @@ export const LockedFilterTooltipContent: FunctionComponent<
         />
       ) : (
         <p className="text-[11px] text-gray-400">
-          {detail.searchTokenUnavailableReason || NO_SEARCH_SYNTAX_REASON}
+          {translator.translateText(
+            detail.searchTokenUnavailableReason || NO_SEARCH_SYNTAX_REASON,
+          )}
         </p>
       )}
     </div>
@@ -474,6 +527,8 @@ interface LockedFilterChipBodyProps {
 const LockedFilterChipBody: FunctionComponent<LockedFilterChipBodyProps> = (
   props: LockedFilterChipBodyProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
+
   return (
     <>
       <Icon
@@ -492,7 +547,9 @@ const LockedFilterChipBody: FunctionComponent<LockedFilterChipBodyProps> = (
               : "text-gray-400"
         }`}
       />
-      <span className="font-medium text-gray-500">{props.displayKey}:</span>
+      <span className="font-medium text-gray-500">
+        {translator.translateText(props.displayKey)}:
+      </span>
       <span>{props.displayValue}</span>
       {props.hasScopeMatches ? (
         <span
@@ -528,6 +585,7 @@ interface DetailedLockedFilterChipProps {
 const DetailedLockedFilterChip: FunctionComponent<
   DetailedLockedFilterChipProps
 > = (props: DetailedLockedFilterChipProps): ReactElement => {
+  const translator: Translator = useTranslator();
   const feedback: CopiedFeedback = useCopiedFeedback();
   const searchToken: string | undefined = props.lockedDetail.searchToken;
   const scopeValueCount: number = countLockedFilterScopeValues(
@@ -591,7 +649,7 @@ const DetailedLockedFilterChip: FunctionComponent<
       </Tooltip>
       {props.trailing}
       <span className="sr-only" aria-live="polite" role="status">
-        {announcement}
+        {translator.translateText(announcement)}
       </span>
     </span>
   );
@@ -600,6 +658,8 @@ const DetailedLockedFilterChip: FunctionComponent<
 const LockedFilterChip: FunctionComponent<LockedFilterChipProps> = (
   props: LockedFilterChipProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
+
   if (!props.lockedDetail) {
     /*
      * Exactly the pill from before the tooltip: not focusable, no name of
@@ -609,7 +669,13 @@ const LockedFilterChip: FunctionComponent<LockedFilterChipProps> = (
     return (
       <span
         className={LOCKED_FILTER_CHIP_CLASS_NAME}
-        title={`${props.displayKey}: ${props.displayValue} (applied filter)`}
+        title={translator.translateTemplate(
+          "{{key}}: {{value}} (applied filter)",
+          {
+            key: translatableTerm(props.displayKey),
+            value: props.displayValue,
+          },
+        )}
         data-testid="locked-filter-chip"
       >
         <LockedFilterChipBody

package/UI/Components/TelemetryViewer/components/SavedViewsDropdown.tsx

@@ -6,6 +6,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import { SavedViewOption } from "../types";
 import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
 import Icon from "../../Icon/Icon";
@@ -44,6 +46,7 @@ const triggerButtonClassName: string =
 const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
   props: SavedViewsDropdownProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const { ref, isComponentVisible, setIsComponentVisible } =
     useComponentOutsideClick(false);
 
@@ -169,7 +172,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
           />
         ) : null}
         <span className="max-w-40 truncate">
-          {selectedView?.name || "Saved Views"}
+          {selectedView?.name || translator.translateText("Saved Views")}
         </span>
         <span
           className={`text-xs text-gray-400 ${
@@ -199,7 +202,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
          */
         <div
           role="dialog"
-          aria-label="Saved views"
+          aria-label={translator.translateText("Saved views")}
           className={`absolute z-20 mt-2 w-72 rounded-lg border border-gray-200 bg-white shadow-xl ${
             props.dropdownAlignment === "right" ? "right-0" : "left-0"
           }`}
@@ -223,7 +226,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                   ✕
                 </span>
                 <span className="truncate text-sm text-gray-600">
-                  Clear view
+                  {translator.translateText("Clear view")}
                 </span>
               </button>
             </div>
@@ -249,13 +252,13 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
           <div className="max-h-72 overflow-y-auto py-1">
             {props.savedViews.length === 0 && (
               <div className="px-3 py-6 text-center text-xs text-gray-400">
-                No saved views yet.
+                {translator.translateText("No saved views yet.")}
               </div>
             )}
 
             {props.savedViews.length > 0 && visible.views.length === 0 && (
               <div className="px-3 py-6 text-center text-xs text-gray-400">
-                No matches found
+                {translator.translateText("No matches found")}
               </div>
             )}
 
@@ -278,7 +281,11 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                      * rather than a bare token appended to the view name.
                      */
                     aria-label={
-                      view.isDefault ? `${view.name} (default)` : view.name
+                      view.isDefault
+                        ? translator.translateTemplate("{{name}} (default)", {
+                            name: view.name,
+                          })
+                        : view.name
                     }
                     /*
                      * The checkmark reads as a checkbox, so the row behaves
@@ -318,7 +325,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                     </span>
                     {view.isDefault && (
                       <span className="shrink-0 text-[10px] text-gray-400">
-                        default
+                        {translator.translateText("default")}
                       </span>
                     )}
                   </button>
@@ -337,7 +344,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                           setIsComponentVisible(false);
                         }}
                       >
-                        Update
+                        {translator.translateText("Update")}
                       </button>
                     )}
                     {props.onEdit && (
@@ -352,7 +359,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                           setIsComponentVisible(false);
                         }}
                       >
-                        Edit
+                        {translator.translateText("Edit")}
                       </button>
                     )}
                     {props.onDelete && (
@@ -367,7 +374,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                           setIsComponentVisible(false);
                         }}
                       >
-                        Delete
+                        {translator.translateText("Delete")}
                       </button>
                     )}
                   </div>
@@ -406,7 +413,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                   setIsComponentVisible(false);
                 }}
               >
-                + Save Current View
+                {translator.translateText("+ Save Current View")}
               </button>
             </div>
           )}

package/UI/Components/TelemetryViewer/components/TelemetryActiveFilterChips.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { translatableTerm, Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import { ActiveFilter } from "../types";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
@@ -20,6 +22,7 @@ export interface TelemetryActiveFilterChipsProps {
 const TelemetryActiveFilterChips: FunctionComponent<
   TelemetryActiveFilterChipsProps
 > = (props: TelemetryActiveFilterChipsProps): ReactElement | null => {
+  const translator: Translator = useTranslator();
   if (props.filters.length === 0) {
     return null;
   }
@@ -57,7 +60,7 @@ const TelemetryActiveFilterChips: FunctionComponent<
             className="inline-flex items-center gap-1 rounded-md border border-indigo-200 bg-indigo-50 py-0.5 pl-2 pr-1 text-xs text-indigo-700"
           >
             <span className="font-medium text-indigo-500">
-              {filter.displayKey}:
+              {translator.translateText(filter.displayKey)}:
             </span>
             <span>{filter.displayValue}</span>
             <button
@@ -66,7 +69,10 @@ const TelemetryActiveFilterChips: FunctionComponent<
               onClick={() => {
                 props.onRemove(filter.facetKey, filter.value);
               }}
-              title={`Remove ${filter.displayKey}: ${filter.displayValue}`}
+              title={translator.translateTemplate("Remove {{key}}: {{value}}", {
+                key: translatableTerm(filter.displayKey),
+                value: filter.displayValue,
+              })}
             >
               <Icon icon={IconProp.Close} className="h-2.5 w-2.5" />
             </button>
@@ -79,7 +85,7 @@ const TelemetryActiveFilterChips: FunctionComponent<
           className="rounded px-1.5 py-0.5 text-[11px] font-medium text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
           onClick={props.onClearAll}
         >
-          Clear all
+          {translator.translateText("Clear all")}
         </button>
       )}
     </div>

package/UI/Components/TelemetryViewer/components/TelemetryDetailPanel.tsx

@@ -6,6 +6,8 @@ import React, {
   useId,
   useRef,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 
 export interface TelemetryDetailPanelTab {
   id: string;
@@ -35,6 +37,7 @@ export interface TelemetryDetailPanelProps {
 const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
   props: TelemetryDetailPanelProps,
 ): ReactElement | null => {
+  const translator: Translator = useTranslator();
   const panelId: string = useId();
   const titleId: string = `${panelId}-title`;
   const panelRef: React.MutableRefObject<HTMLDivElement | null> =
@@ -233,8 +236,8 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
             type="button"
             className="rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
             onClick={props.onClose}
-            title="Close (Esc)"
-            aria-label="Close details panel"
+            title={translator.translateText("Close (Esc)")}
+            aria-label={translator.translateText("Close details panel")}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -260,7 +263,7 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
         <div
           className="flex items-center gap-1 border-b border-gray-100 px-2 pt-1.5"
           role="tablist"
-          aria-label="Detail sections"
+          aria-label={translator.translateText("Detail sections")}
         >
           {props.tabs.map((tab: TelemetryDetailPanelTab, index: number) => {
             const isActive: boolean = tab.id === props.activeTabId;

package/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.tsx

@@ -5,6 +5,8 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import { FacetData, FacetValue, ActiveFilter, FacetConfig } from "../types";
 import TelemetryFacetSection from "./TelemetryFacetSection";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
@@ -56,6 +58,7 @@ export interface TelemetryFacetSidebarProps {
 const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
   props: TelemetryFacetSidebarProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const orderedConfigs: Array<FacetConfig> = useMemo(() => {
     const copy: Array<FacetConfig> = [...props.facetConfigs];
     copy.sort((a: FacetConfig, b: FacetConfig): number => {
@@ -171,7 +174,7 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
     >
       <div className="border-b border-gray-100 px-3 py-2.5">
         <h3 className="text-[11px] font-semibold uppercase tracking-widest text-gray-400">
-          {props.headerLabel || "Filters"}
+          {translator.translateText(props.headerLabel || "Filters")}
         </h3>
       </div>
 

package/UI/Components/TelemetryViewer/components/TelemetryFacetValueRow.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 
@@ -16,6 +18,7 @@ export interface TelemetryFacetValueRowProps {
 const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
   props: TelemetryFacetValueRowProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const barWidth: number =
     props.maxCount > 0
       ? Math.max(4, Math.round((props.count / props.maxCount) * 100))
@@ -40,11 +43,10 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
         onClick={() => {
           props.onInclude(props.value);
         }}
-        title={
-          isActive
-            ? `Remove filter: ${displayLabel}`
-            : `Filter to ${displayLabel}`
-        }
+        title={translator.translateTemplate(
+          isActive ? "Remove filter: {{value}}" : "Filter to {{value}}",
+          { value: displayLabel },
+        )}
       >
         {isActive ? (
           <span className="flex h-3.5 w-3.5 flex-none items-center justify-center rounded bg-indigo-500">
@@ -105,8 +107,12 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
           e.stopPropagation();
           props.onExclude(props.value);
         }}
-        title={`Exclude ${displayLabel}`}
-        aria-label={`Exclude ${displayLabel}`}
+        title={translator.translateTemplate("Exclude {{value}}", {
+          value: displayLabel,
+        })}
+        aria-label={translator.translateTemplate("Exclude {{value}}", {
+          value: displayLabel,
+        })}
       >
         -
       </button>

package/UI/Components/TelemetryViewer/components/TelemetryHistogram.tsx

@@ -4,6 +4,8 @@ import React, {
   ReactNode,
   useMemo,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import {
   BarChart,
   Bar,
@@ -98,6 +100,7 @@ function formatYAxisTick(value: number): string {
 const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
   props: TelemetryHistogramProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const selection: HistogramRangeSelectionState = useHistogramRangeSelection({
     onTimeRangeSelect: props.onTimeRangeSelect,
     onZoomOut: props.onZoomOut,
@@ -186,18 +189,20 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
       <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-gray-100 px-4 py-2 md:flex-nowrap md:gap-x-0">
         <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 md:flex-nowrap">
           <span className="text-xs font-medium text-gray-500">
-            {props.title || "Volume"}
+            {translator.translateText(props.title || "Volume")}
           </span>
           {props.onTimeRangeSelect && pivotedData.length > 0 && (
             <span className="text-[10px] text-gray-300">
-              {selection.canClickToZoom
-                ? "Click or drag to zoom"
-                : "Drag to zoom"}
+              {translator.translateText(
+                selection.canClickToZoom
+                  ? "Click or drag to zoom"
+                  : "Drag to zoom",
+              )}
             </span>
           )}
           {props.onZoomOut && (
             <span className="text-[10px] text-gray-300">
-              Double-click to reset
+              {translator.translateText("Double-click to reset")}
             </span>
           )}
         </div>
@@ -229,10 +234,12 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
         >
           {props.isLoading ? (
             <ComponentLoader />
-          ) : props.headerActions ? (
-            "No data for this metric in the selected range"
           ) : (
-            "No data in the selected range"
+            translator.translateText(
+              props.headerActions
+                ? "No data for this metric in the selected range"
+                : "No data in the selected range",
+            )
           )}
         </div>
       )}

package/UI/Components/TelemetryViewer/components/TelemetryHistogramTooltip.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import OneUptimeDate from "../../../../Types/Date";
 import { HistogramSeriesOption } from "../types";
 
@@ -60,6 +62,7 @@ function formatTooltipTime(label: string | undefined): string {
 const TelemetryHistogramTooltip: FunctionComponent<
   TelemetryHistogramTooltipProps
 > = (props: TelemetryHistogramTooltipProps): ReactElement | null => {
+  const translator: Translator = useTranslator();
   if (!props.active || !props.payload || props.payload.length === 0) {
     return null;
   }
@@ -120,7 +123,9 @@ const TelemetryHistogramTooltip: FunctionComponent<
       </div>
       {entries.length > 1 && !props.valueFormatter && (
         <div className="mt-1.5 flex items-center justify-between border-t border-gray-100 pt-1.5">
-          <span className="text-xs text-gray-500">Total</span>
+          <span className="text-xs text-gray-500">
+            {translator.translateText("Total")}
+          </span>
           <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">
             {total.toLocaleString()}
           </span>

package/UI/Components/TelemetryViewer/components/TelemetryItemLabel.ts

@@ -0,0 +1,18 @@
+export interface TelemetryItemLabels {
+  singular: string;
+  plural: string;
+}
+
+/*
+ * Callers pass a plural label ("traces", "spans"). The singular is only
+ * used for a one-row result set, where trimming a trailing "s" is right
+ * for every label these views pass.
+ */
+export function getTelemetryItemLabels(
+  itemLabel?: string | undefined,
+): TelemetryItemLabels {
+  const plural: string = itemLabel || "results";
+  const singular: string = plural.endsWith("s") ? plural.slice(0, -1) : plural;
+
+  return { singular, plural };
+}