@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/LogsViewer/components/LogDetailsPanel.tsx

@@ -7,6 +7,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import Log from "../../../../Models/AnalyticsModels/Log";
 import Service from "../../../../Models/DatabaseModels/Service";
 import Dictionary from "../../../../Types/Dictionary";
@@ -234,6 +236,7 @@ export function splitTraceContextLogs(
 const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
   props: LogDetailsPanelProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [activeTab, setActiveTab] = useState<LogDetailTab>("details");
   const [contextBefore, setContextBefore] = useState<Array<ContextLog>>([]);
   const [contextAfter, setContextAfter] = useState<Array<ContextLog>>([]);
@@ -674,13 +677,13 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
               {traceId && (
                 <span className={smallBadgeClass}>
                   <Icon icon={IconProp.Logs} className="h-3 w-3" />
-                  Trace
+                  {translator.translateText("Trace")}
                 </span>
               )}
               {spanId && (
                 <span className={smallBadgeClass}>
                   <Icon icon={IconProp.Terminal} className="h-3 w-3" />
-                  Span
+                  {translator.translateText("Span")}
                 </span>
               )}
             </div>
@@ -692,7 +695,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
             type="button"
             onClick={props.onClose}
             className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-gray-50 text-gray-400 transition-colors hover:border-gray-300 hover:text-gray-600"
-            title="Close details"
+            title={translator.translateText("Close details")}
           >
             <Icon icon={IconProp.Close} className="h-4 w-4" />
           </button>
@@ -708,7 +711,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
             setActiveTab("details");
           }}
         >
-          Details
+          {translator.translateText("Details")}
         </button>
         {props.projectId && (
           <button
@@ -718,7 +721,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
               setActiveTab("context");
             }}
           >
-            Context
+            {translator.translateText("Context")}
           </button>
         )}
       </div>
@@ -728,7 +731,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
         <div className="mt-4 space-y-5 text-sm text-gray-700">
           <section className="space-y-3">
             <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
-              <span>Log Body</span>
+              <span>{translator.translateText("Log Body")}</span>
               <CopyTextButton
                 textToBeCopied={bodyDetails.raw}
                 size="xs"
@@ -756,7 +759,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
               {traceId && (
                 <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
                   <div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
-                    <span>Trace ID</span>
+                    <span>{translator.translateText("Trace ID")}</span>
                     <CopyTextButton
                       textToBeCopied={traceId}
                       size="xs"
@@ -770,7 +773,10 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                       <Link
                         to={traceRoute}
                         className="max-w-full truncate font-mono text-xs text-indigo-600 hover:text-indigo-500"
-                        title={`View trace ${traceId}`}
+                        title={translator.translateTemplate(
+                          "View trace {{id}}",
+                          { id: traceId },
+                        )}
                       >
                         {traceId}
                       </Link>
@@ -795,7 +801,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
               {spanId && (
                 <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
                   <div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
-                    <span>Span ID</span>
+                    <span>{translator.translateText("Span ID")}</span>
                     <CopyTextButton
                       textToBeCopied={spanId}
                       size="xs"
@@ -809,7 +815,10 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                       <Link
                         to={effectiveSpanRoute}
                         className="max-w-full truncate font-mono text-xs text-indigo-600 hover:text-indigo-500"
-                        title={`View span ${spanId}`}
+                        title={translator.translateTemplate(
+                          "View span {{id}}",
+                          { id: spanId },
+                        )}
                       >
                         {spanId}
                       </Link>
@@ -834,7 +843,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
               {sessionId && (
                 <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
                   <div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
-                    <span>Session</span>
+                    <span>{translator.translateText("Session")}</span>
                     <CopyTextButton
                       textToBeCopied={sessionId}
                       size="xs"
@@ -848,7 +857,10 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                       <Link
                         to={sessionRoute}
                         className="max-w-full truncate font-mono text-xs text-indigo-600 hover:text-indigo-500"
-                        title={`View session replay ${sessionId}`}
+                        title={translator.translateTemplate(
+                          "View session replay {{id}}",
+                          { id: sessionId },
+                        )}
                       >
                         {sessionId}
                       </Link>
@@ -876,7 +888,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
             <section className="space-y-3">
               <header className="flex flex-wrap items-center justify-between gap-2">
                 <span className="flex items-center gap-1.5 text-[11px] uppercase tracking-wide text-gray-400">
-                  Attributes
+                  {translator.translateText("Attributes")}
                   <span className="rounded-full bg-gray-100 px-1.5 py-px text-[10px] font-medium normal-case tracking-normal tabular-nums text-gray-500">
                     {attributeEntries.length}
                   </span>
@@ -923,7 +935,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                           >
                             {entry.value || (
                               <span className="italic text-gray-400">
-                                empty
+                                {translator.translateText("empty")}
                               </span>
                             )}
                           </span>
@@ -932,7 +944,10 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                               <button
                                 type="button"
                                 className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-indigo-600"
-                                title={`Filter by ${entry.key}: ${entry.value}`}
+                                title={translator.translateTemplate(
+                                  "Filter by {{key}}: {{value}}",
+                                  { key: entry.key, value: entry.value },
+                                )}
                                 onClick={() => {
                                   props.onFilterByAttribute!(
                                     entry.key,
@@ -951,7 +966,10 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                               size="xs"
                               variant="ghost"
                               iconOnly={true}
-                              title={`Copy ${entry.key}`}
+                              title={translator.translateTemplate(
+                                "Copy {{key}}",
+                                { key: entry.key },
+                              )}
                             />
                           </div>
                         </li>
@@ -981,7 +999,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   handleContextScopeChange("nearby");
                 }}
               >
-                Nearby (service + time)
+                {translator.translateText("Nearby (service + time)")}
               </button>
               <button
                 type="button"
@@ -995,27 +1013,29 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   handleContextScopeChange("trace");
                 }}
               >
-                This trace
+                {translator.translateText("This trace")}
               </button>
             </div>
           )}
           {contextLoading && (
             <div className="flex items-center justify-center py-8 text-xs text-gray-400">
-              Loading surrounding logs...
+              {translator.translateText("Loading surrounding logs...")}
             </div>
           )}
           {contextError && (
             <div className="rounded-md bg-red-50 p-3 text-xs text-red-600">
-              {contextError}
+              {translator.translateText(contextError)}
             </div>
           )}
           {!contextLoading && !contextError && contextLoaded && (
             <div className="divide-y divide-gray-100 rounded-lg border border-gray-200">
               {contextBefore.length === 0 && contextAfter.length === 0 && (
                 <div className="px-3 py-6 text-center text-xs text-gray-400">
-                  {contextScope === "trace"
-                    ? "No other logs found for this trace."
-                    : "No surrounding logs found for this service."}
+                  {translator.translateText(
+                    contextScope === "trace"
+                      ? "No other logs found for this trace."
+                      : "No surrounding logs found for this service.",
+                  )}
                 </div>
               )}
               {contextBefore.map((ctxLog: ContextLog) => {

package/UI/Components/LogsViewer/components/LogSearchBar.tsx

@@ -10,6 +10,8 @@ import React, {
 } from "react";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import LogSearchSuggestions from "./LogSearchSuggestions";
 import LogSearchHelp from "./LogSearchHelp";
 
@@ -38,6 +40,7 @@ const LogSearchBar: React.ForwardRefExoticComponent<
   LogSearchBarProps & React.RefAttributes<LogSearchBarRef>
 > = forwardRef<LogSearchBarRef, LogSearchBarProps>(
   (props: LogSearchBarProps, ref: React.Ref<LogSearchBarRef>): ReactElement => {
+    const translator: Translator = useTranslator();
     const [isFocused, setIsFocused] = useState<boolean>(false);
     const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
     const [showHelp, setShowHelp] = useState<boolean>(false);
@@ -366,8 +369,13 @@ const LogSearchBar: React.ForwardRefExoticComponent<
             }}
             onKeyDown={handleKeyDown}
             placeholder={
-              props.placeholder ||
-              'Search logs... (e.g. severity:error service:api "connection refused")'
+              translator.translateText(props.placeholder) ||
+              translator.translateTemplate(
+                "Search logs... (e.g. {{example}})",
+                {
+                  example: 'severity:error service:api "connection refused"',
+                },
+              )
             }
             className="flex-1 bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 outline-none"
             spellCheck={false}
@@ -383,7 +391,7 @@ const LogSearchBar: React.ForwardRefExoticComponent<
                 setShowSuggestions(false);
                 inputRef.current?.focus();
               }}
-              title="Clear search"
+              title={translator.translateText("Clear search")}
             >
               <Icon icon={IconProp.Close} className="h-3.5 w-3.5" />
             </button>

package/UI/Components/LogsViewer/components/LogSearchHelp.tsx

@@ -1,4 +1,7 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator, translationKey } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
+import TranslatedSentence from "../../TranslatedSentence/TranslatedSentence";
 
 export interface LogSearchHelpProps {
   onExampleClick?: ((example: string) => void) | undefined;
@@ -18,7 +21,7 @@ interface HelpRow {
  */
 const HELP_ROWS: Array<HelpRow> = [
   {
-    syntax: "free text",
+    syntax: translationKey("free text"),
     description: "Search log messages",
     example: "connection refused",
   },
@@ -82,11 +85,12 @@ const HELP_ROWS: Array<HelpRow> = [
 const LogSearchHelp: FunctionComponent<LogSearchHelpProps> = (
   props: LogSearchHelpProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   return (
     <div className="absolute left-0 top-full z-50 mt-1 w-[36rem] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
       <div className="border-b border-gray-100 px-3 py-2">
         <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
-          Search syntax
+          {translator.translateText("Search syntax")}
         </span>
       </div>
 
@@ -106,12 +110,12 @@ const LogSearchHelp: FunctionComponent<LogSearchHelpProps> = (
               >
                 <td className="whitespace-nowrap py-1.5 pl-3 pr-2">
                   <code className="font-mono text-xs text-indigo-600">
-                    {row.syntax}
+                    {translator.translateText(row.syntax)}
                   </code>
                 </td>
                 <td className="py-1.5 px-2">
                   <span className="text-xs text-gray-500">
-                    {row.description}
+                    {translator.translateText(row.description)}
                   </span>
                 </td>
                 <td className="whitespace-nowrap py-1.5 pl-2 pr-3 text-right">
@@ -127,16 +131,22 @@ const LogSearchHelp: FunctionComponent<LogSearchHelpProps> = (
 
       <div className="border-t border-gray-100 px-3 py-1.5">
         <span className="text-[10px] text-gray-400">
-          Press{" "}
-          <kbd className="rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-[10px]">
-            Enter
-          </kbd>{" "}
-          to search · Filters combine with AND ·{" "}
-          <code className="font-mono text-[10px] text-gray-500">
-            severity:error service:api &quot;timeout&quot;
-          </code>{" "}
-          · Use <code className="font-mono text-[10px]">\*</code> for a literal
-          asterisk
+          <TranslatedSentence
+            template="Press {{key}} to search · Filters combine with AND · {{example}} · Use {{escape}} for a literal asterisk"
+            slots={{
+              key: (
+                <kbd className="rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-[10px]">
+                  Enter
+                </kbd>
+              ),
+              example: (
+                <code className="font-mono text-[10px] text-gray-500">
+                  severity:error service:api &quot;timeout&quot;
+                </code>
+              ),
+              escape: <code className="font-mono text-[10px]">\*</code>,
+            }}
+          />
         </span>
       </div>
     </div>

package/UI/Components/LogsViewer/components/LogSearchSuggestions.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 
 export interface LogSearchSuggestionsProps {
   suggestions: Array<string>;
@@ -20,6 +22,7 @@ const MAX_VISIBLE_SUGGESTIONS: number = 8;
 const LogSearchSuggestions: FunctionComponent<LogSearchSuggestionsProps> = (
   props: LogSearchSuggestionsProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const visible: Array<string> = props.suggestions.slice(
     0,
     MAX_VISIBLE_SUGGESTIONS,
@@ -50,7 +53,9 @@ const LogSearchSuggestions: FunctionComponent<LogSearchSuggestionsProps> = (
               d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
             ></path>
           </svg>
-          <span>{props.loadingMessage || "Loading..."}</span>
+          <span>
+            {translator.translateText(props.loadingMessage || "Loading...")}
+          </span>
         </div>
       )}
       {!props.isLoading &&
@@ -97,7 +102,10 @@ const LogSearchSuggestions: FunctionComponent<LogSearchSuggestionsProps> = (
       })}
       {props.suggestions.length > MAX_VISIBLE_SUGGESTIONS && (
         <div className="px-3 py-1 text-[11px] text-gray-400">
-          +{props.suggestions.length - MAX_VISIBLE_SUGGESTIONS} more...
+          {translator.translatePlural(
+            { one: "+{{count}} more...", other: "+{{count}} more..." },
+            props.suggestions.length - MAX_VISIBLE_SUGGESTIONS,
+          )}
         </div>
       )}
     </div>

package/UI/Components/LogsViewer/components/LogsAnalyticsView.tsx

@@ -7,6 +7,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import {
   BarChart,
   Bar,
@@ -265,6 +267,8 @@ interface AnalyticsTooltipProps {
 const AnalyticsTooltip: FunctionComponent<AnalyticsTooltipProps> = (
   props: AnalyticsTooltipProps,
 ): ReactElement | null => {
+  const translator: Translator = useTranslator();
+
   if (!props.active || !props.payload || props.payload.length === 0) {
     return null;
   }
@@ -329,7 +333,9 @@ const AnalyticsTooltip: FunctionComponent<AnalyticsTooltipProps> = (
       </div>
       {entries.length > 1 && (
         <div className="mt-2 flex items-center justify-between border-t border-gray-100 pt-2">
-          <span className="text-[11px] font-medium text-gray-400">Total</span>
+          <span className="text-[11px] font-medium text-gray-400">
+            {translator.translateText("Total")}
+          </span>
           <span className="font-mono text-xs font-bold tabular-nums text-gray-900">
             {total.toLocaleString()}
           </span>
@@ -342,6 +348,7 @@ const AnalyticsTooltip: FunctionComponent<AnalyticsTooltipProps> = (
 const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
   props: LogsAnalyticsViewProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [chartType, setChartType] = useState<AnalyticsChartType>("timeseries");
   const [aggregation, setAggregation] = useState<AnalyticsAggregation>("count");
   const [aggregationField, setAggregationField] = useState<string>("");
@@ -798,8 +805,15 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
         className="ml-auto shrink-0 whitespace-nowrap text-[10px] text-gray-400"
         data-testid={LOGS_ANALYTICS_ZOOM_HINT_TEST_ID}
       >
-        {selection.canClickToZoom ? "Click or drag to zoom" : "Drag to zoom"}
-        {zoomHandlers.onTimeRangeReset ? " · double-click to reset" : ""}
+        {translator.translateText(
+          selection.canClickToZoom
+            ? zoomHandlers.onTimeRangeReset
+              ? "Click or drag to zoom · double-click to reset"
+              : "Click or drag to zoom"
+            : zoomHandlers.onTimeRangeReset
+              ? "Drag to zoom · double-click to reset"
+              : "Drag to zoom",
+        )}
       </span>
     );
   };
@@ -1176,7 +1190,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   );
                 })}
                 <th className="px-4 py-2.5 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-400">
-                  Count
+                  {translator.translateText("Count")}
                 </th>
                 <th className="w-48 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider text-gray-400" />
               </tr>
@@ -1254,7 +1268,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
           />
         </svg>
         <p className="text-sm text-gray-400">
-          No data available for the selected query
+          {translator.translateText("No data available for the selected query")}
         </p>
       </div>
     );

package/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx

@@ -5,6 +5,8 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import {
   FacetData,
   FacetValue,
@@ -256,6 +258,7 @@ const PRIORITY_FACET_KEYS: ReadonlyArray<string> = [
 const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
   props: LogsFacetSidebarProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const severityColorMap: Record<string, string> = useMemo(() => {
     return buildSeverityColorMap();
   }, []);
@@ -383,7 +386,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
     >
       <div className="border-b border-gray-100 px-3 py-2.5">
         <h3 className="text-[11px] font-semibold uppercase tracking-widest text-gray-400">
-          Filters
+          {translator.translateText("Filters")}
         </h3>
       </div>
 

package/UI/Components/LogsViewer/components/LogsHistogram.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import {
   BarChart,
   Bar,
@@ -89,6 +91,7 @@ function formatYAxisTick(value: number): string {
 const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
   props: LogsHistogramProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const selection: HistogramRangeSelectionState = useHistogramRangeSelection({
     onTimeRangeSelect: props.onTimeRangeSelect,
     onZoomOut: props.onZoomOut,
@@ -154,17 +157,21 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
       {/* Header with legend */}
       <div className="flex items-center justify-between border-b border-gray-100 px-4 py-2">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-medium text-gray-500">Log Volume</span>
+          <span className="text-xs font-medium text-gray-500">
+            {translator.translateText("Log 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>
@@ -192,7 +199,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
           {props.isLoading ? (
             <ComponentLoader />
           ) : (
-            "No logs in the selected range"
+            translator.translateText("No logs in the selected range")
           )}
         </div>
       )}

package/UI/Components/LogsViewer/components/LogsPagination.tsx

@@ -9,6 +9,14 @@ export interface LogsPaginationProps {
   onPageChange: (page: number) => void;
   onPageSizeChange: (size: number) => void;
   isDisabled?: boolean;
+  /*
+   * Set when `totalItems` is not a total but the lower bound the logs list
+   * endpoint answers with: the footer then pages forward while more logs
+   * follow, and prints no "of N" and no page numbers it cannot know.
+   */
+  hasMore?: boolean | undefined;
+  // Logs this page rendered, so the printed range never runs past them.
+  itemsOnCurrentPage?: number | undefined;
 }
 
 /**
@@ -28,6 +36,8 @@ const LogsPagination: FunctionComponent<LogsPaginationProps> = (
       totalItemsCount={props.totalItems}
       itemsOnPage={props.pageSize}
       itemsOnPageOptions={props.pageSizeOptions}
+      hasMore={props.hasMore}
+      itemsOnCurrentPage={props.itemsOnCurrentPage}
       isCompact={true}
       className="bg-gray-50/50"
       isLoading={false}