@oneuptime/common 14.0.12 → 14.0.13

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

@@ -1,4 +1,7 @@
 import React, { Fragment, FunctionComponent, ReactElement } from "react";
+import { translatableTerm, Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
+import TranslatedSentence from "../../TranslatedSentence/TranslatedSentence";
 import Log from "../../../../Models/AnalyticsModels/Log";
 import Service from "../../../../Models/DatabaseModels/Service";
 import Dictionary from "../../../../Types/Dictionary";
@@ -121,6 +124,7 @@ const stringifyLogValue: (value: unknown) => string = (
 const LogsTable: FunctionComponent<LogsTableProps> = (
   props: LogsTableProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const showEmptyState: boolean = !props.isLoading && props.logs.length === 0;
   const activeSortField: LogsTableSortField | undefined = props.sortField;
   const activeSortOrder: SortOrder = props.sortOrder || SortOrder.Descending;
@@ -213,7 +217,9 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
         <Link
           to={traceRoute}
           className={linkClassName}
-          title={`View trace ${traceId}`}
+          title={translator.translateTemplate("View trace {{id}}", {
+            id: traceId,
+          })}
         >
           {traceId}
         </Link>
@@ -244,7 +250,9 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
           <Link
             to={spanRoute}
             className={linkClassName}
-            title={`View span ${spanId}`}
+            title={translator.translateTemplate("View span {{id}}", {
+              id: spanId,
+            })}
           >
             {spanId}
           </Link>
@@ -264,7 +272,9 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
               openSpanLazily(spanId, log);
             }}
             className={linkClassName}
-            title={`View span ${spanId}`}
+            title={translator.translateTemplate("View span {{id}}", {
+              id: spanId,
+            })}
           >
             {spanId}
           </Link>
@@ -301,7 +311,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                 : "none"
             }
           >
-            <span>Time</span>
+            <span>{translator.translateText("Time")}</span>
             <Icon
               icon={resolveSortIcon("time")}
               className={resolveSortIconClass("time")}
@@ -331,7 +341,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                 : "none"
             }
           >
-            <span>Severity</span>
+            <span>{translator.translateText("Severity")}</span>
             <Icon
               icon={resolveSortIcon("severityText")}
               className={resolveSortIconClass("severityText")}
@@ -345,7 +355,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
     if (columnId === "service") {
       return (
         <th scope="col" className="px-4 py-2.5" key={columnId}>
-          Service
+          {translator.translateText("Service")}
         </th>
       );
     }
@@ -353,7 +363,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
     if (columnId === "message") {
       return (
         <th scope="col" className="px-4 py-2.5" key={columnId}>
-          Message
+          {translator.translateText("Message")}
         </th>
       );
     }
@@ -361,7 +371,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
     if (columnId === "traceId") {
       return (
         <th scope="col" className="px-4 py-2.5" key={columnId}>
-          Trace ID
+          {translator.translateText("Trace ID")}
         </th>
       );
     }
@@ -369,7 +379,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
     if (columnId === "spanId") {
       return (
         <th scope="col" className="px-4 py-2.5" key={columnId}>
-          Span ID
+          {translator.translateText("Span ID")}
         </th>
       );
     }
@@ -403,10 +413,14 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                 resourceMaps: props.resourceEntityMaps,
                 entityNameMap: props.entityNameMap,
               });
-              const serviceName: string = entityDisplay.name || "Unknown";
+              const serviceName: string =
+                entityDisplay.name || translator.translateText("Unknown") || "";
               const serviceColor: string = entityDisplay.color || "#94a3b8";
               const serviceTitle: string = entityDisplay.typeLabel
-                ? `${entityDisplay.typeLabel}: ${serviceName}`
+                ? translator.translateTemplate("{{type}}: {{name}}", {
+                    type: translatableTerm(entityDisplay.typeLabel),
+                    name: serviceName,
+                  })
                 : serviceName;
 
               const message: string = log.body?.toString() || "";
@@ -493,13 +507,25 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                                   <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-gray-400">
                                     {traceId && !showTraceColumn && (
                                       <span>
-                                        Trace:{" "}
-                                        {renderTraceIdValue(traceId, log)}
+                                        <TranslatedSentence
+                                          template="Trace: {{id}}"
+                                          slots={{
+                                            id: renderTraceIdValue(
+                                              traceId,
+                                              log,
+                                            ),
+                                          }}
+                                        />
                                       </span>
                                     )}
                                     {spanId && !showSpanColumn && (
                                       <span>
-                                        Span: {renderSpanIdValue(spanId, log)}
+                                        <TranslatedSentence
+                                          template="Span: {{id}}"
+                                          slots={{
+                                            id: renderSpanIdValue(spanId, log),
+                                          }}
+                                        />
                                       </span>
                                     )}
                                   </div>
@@ -612,10 +638,12 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
         <div className="flex h-full items-center justify-center px-6 py-12 text-center bg-white">
           <div className="w-full max-w-xl rounded-md border border-gray-200 bg-white p-6 text-left shadow-sm">
             <p className="font-mono text-sm uppercase text-gray-500">
-              No logs found
+              {translator.translateText("No logs found")}
             </p>
             <p className="mt-3 font-mono text-xs text-gray-400">
-              {props.emptyMessage || "Adjust filters or check again later."}
+              {translator.translateText(
+                props.emptyMessage || "Adjust filters or check again later.",
+              )}
             </p>
           </div>
         </div>

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

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import LiveLogsToggle from "./LiveLogsToggle";
 import LogTimeRangePicker from "./LogTimeRangePicker";
 import ColumnSelector from "./ColumnSelector";
@@ -15,12 +17,25 @@ import {
   LogsViewMode,
 } from "../types";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
+import { ResultTotal } from "../../../Utils/Telemetry/ResultTotal";
+import TelemetryResultTotal from "../../TelemetryViewer/components/TelemetryResultTotal";
 import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
 
 export interface LogsViewerToolbarProps {
   resultCount: number;
+  // `resultCount` is only how many logs are known so far: "100+ results".
+  isResultCountLowerBound?: boolean | undefined;
+  /*
+   * The size of the result set when the list cannot say (see
+   * UseResultTotal): shown instead of `resultCount` — "1,234,567 logs",
+   * "Counting logs…", "50+ logs". Without it `resultCount` is the total.
+   */
+  resultTotal?: ResultTotal | undefined;
+  // Logs shown up to the end of this page: all an uncounted total vouches for.
+  rowsThroughPage?: number | undefined;
   currentPage?: number;
-  totalPages?: number;
+  // Undefined while the total is not known, and then the page has no "of N".
+  totalPages?: number | undefined;
   className?: string;
   liveOptions?: LiveLogsOptions;
   timeRange?: RangeStartAndEndDateTime;
@@ -66,10 +81,15 @@ export const LOGS_VIEWER_EXPORT_MENU_TEST_ID: string =
 const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
   props: LogsViewerToolbarProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const { currentPage, totalPages } = props;
   const hasPaginationSummary: boolean = Boolean(
-    currentPage && totalPages && totalPages > 0,
+    currentPage &&
+      ((totalPages && totalPages > 0) ||
+        props.resultTotal ||
+        props.isResultCountLowerBound),
   );
+  const hasPageCount: boolean = Boolean(totalPages && totalPages > 0);
 
   const {
     ref: exportDropdownRef,
@@ -107,7 +127,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
             onClick={props.onToggleFacetPanel}
           >
             <Icon icon={IconProp.Filter} className="h-3.5 w-3.5" />
-            <span>Filters</span>
+            <span>{translator.translateText("Filters")}</span>
           </button>
         )}
 
@@ -137,7 +157,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
                   d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z"
                 />
               </svg>
-              List
+              {translator.translateText("List")}
             </button>
             <button
               type="button"
@@ -163,7 +183,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
                   d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
                 />
               </svg>
-              Analytics
+              {translator.translateText("Analytics")}
             </button>
           </div>
         )}
@@ -171,21 +191,21 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
         {props.signalPivotActions && props.signalPivotActions.length > 0 && (
           <div
             className="inline-flex items-center gap-0.5 rounded-md border border-gray-200 bg-white p-0.5 shadow-sm"
-            aria-label="Related telemetry signals"
+            aria-label={translator.translateText("Related telemetry signals")}
           >
             {props.signalPivotActions.map((action: LogsSignalPivotAction) => {
               return (
                 <Tooltip key={action.id} text={action.tooltip}>
                   <button
                     type="button"
-                    aria-label={action.tooltip}
+                    aria-label={translator.translateText(action.tooltip)}
                     className="inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400"
                     onClick={action.onClick}
                   >
                     {action.icon && (
                       <Icon icon={action.icon} className="h-3.5 w-3.5" />
                     )}
-                    <span>{action.label}</span>
+                    <span>{translator.translateText(action.label)}</span>
                   </button>
                 </Tooltip>
               );
@@ -207,13 +227,38 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
         )}
 
         <div className="flex items-center gap-2 text-xs text-gray-500">
-          <span className="font-medium text-gray-700">
-            {props.resultCount.toLocaleString()} result
-            {props.resultCount === 1 ? "" : "s"}
-          </span>
+          {props.resultTotal ? (
+            <TelemetryResultTotal
+              total={props.resultTotal}
+              rowsThroughPage={props.rowsThroughPage ?? props.resultCount}
+              itemLabel="logs"
+            />
+          ) : (
+            <span className="font-medium text-gray-700">
+              {props.isResultCountLowerBound
+                ? translator.translatePlural(
+                    { one: "{{count}}+ results", other: "{{count}}+ results" },
+                    props.resultCount,
+                  )
+                : translator.translatePlural(
+                    { one: "{{count}} result", other: "{{count}} results" },
+                    props.resultCount,
+                  )}
+            </span>
+          )}
           {hasPaginationSummary && (
-            <span className="text-gray-400">
-              Page {currentPage} of {totalPages}
+            <span className="whitespace-nowrap text-gray-400">
+              {hasPageCount
+                ? translator.translateTemplate(
+                    "Page {{current}} of {{total}}",
+                    {
+                      current: translator.formatNumber(currentPage || 0),
+                      total: translator.formatNumber(totalPages || 0),
+                    },
+                  )
+                : translator.translateTemplate("Page {{current}}", {
+                    current: translator.formatNumber(currentPage || 0),
+                  })}
             </span>
           )}
         </div>
@@ -239,7 +284,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
             type="button"
             className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50"
             onClick={props.onShowDocumentation}
-            title="Setup Documentation"
+            title={translator.translateText("Setup Documentation")}
           >
             <svg
               className="h-3.5 w-3.5"
@@ -254,7 +299,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
                 d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
               />
             </svg>
-            Docs
+            {translator.translateText("Docs")}
           </button>
         )}
 
@@ -268,7 +313,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
                   : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
               }`}
               onClick={props.onToggleKeyboardShortcuts}
-              title="Keyboard shortcuts (?)"
+              title={translator.translateText("Keyboard shortcuts (?)")}
             >
               <kbd className="inline-flex h-4 min-w-[1rem] items-center justify-center rounded border border-current px-0.5 font-mono text-[10px] font-semibold leading-none">
                 ?
@@ -304,7 +349,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
                   d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
                 />
               </svg>
-              Export
+              {translator.translateText("Export")}
               <svg
                 className="h-3 w-3"
                 fill="none"
@@ -333,7 +378,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
                       props.onExportCSV!();
                     }}
                   >
-                    Export as CSV
+                    {translator.translateText("Export as CSV")}
                   </button>
                 )}
                 {props.onExportJSON && (
@@ -345,7 +390,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
                       props.onExportJSON!();
                     }}
                   >
-                    Export as JSON
+                    {translator.translateText("Export as JSON")}
                   </button>
                 )}
               </div>

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

@@ -6,6 +6,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import { LogsSavedViewOption } from "../types";
 import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
 import SavedViewsSearchInput from "../../SavedViews/SavedViewsSearchInput";
@@ -39,6 +41,7 @@ const triggerButtonClassName: string =
 const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
   props: SavedViewsDropdownProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const { ref, isComponentVisible, setIsComponentVisible } =
     useComponentOutsideClick(false);
 
@@ -164,7 +167,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
         aria-expanded={isComponentVisible}
       >
         <span className="max-w-40 truncate">
-          {selectedView?.name || "Saved Views"}
+          {selectedView?.name || translator.translateText("Saved Views")}
         </span>
         <span className="text-xs text-gray-400">
           {props.savedViews.length.toLocaleString()}
@@ -180,7 +183,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
          */
         <div
           role="dialog"
-          aria-label="Saved views"
+          aria-label={translator.translateText("Saved views")}
           className="absolute left-0 right-0 z-20 mt-2 rounded-lg border border-gray-200 bg-white shadow-xl md:right-auto md:w-72"
         >
           {/*
@@ -202,7 +205,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                   ✕
                 </span>
                 <span className="truncate text-sm text-gray-600">
-                  Clear view
+                  {translator.translateText("Clear view")}
                 </span>
               </button>
             </div>
@@ -228,13 +231,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>
             )}
 
@@ -257,7 +260,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
@@ -297,7 +304,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                     </span>
                     {view.isDefault && (
                       <span className="shrink-0 text-[10px] text-gray-400">
-                        default
+                        {translator.translateText("default")}
                       </span>
                     )}
                   </button>
@@ -316,7 +323,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                           setIsComponentVisible(false);
                         }}
                       >
-                        Update
+                        {translator.translateText("Update")}
                       </button>
                     )}
                     {props.onEdit && (
@@ -331,7 +338,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                           setIsComponentVisible(false);
                         }}
                       >
-                        Edit
+                        {translator.translateText("Edit")}
                       </button>
                     )}
                     {props.onDelete && (
@@ -346,7 +353,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                           setIsComponentVisible(false);
                         }}
                       >
-                        Delete
+                        {translator.translateText("Delete")}
                       </button>
                     )}
                   </div>
@@ -385,7 +392,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                   setIsComponentVisible(false);
                 }}
               >
-                + Save Current View
+                {translator.translateText("+ Save Current View")}
               </button>
             </div>
           )}

package/UI/Components/Markdown.tsx/LazyMarkdownViewer.tsx

@@ -4,6 +4,8 @@
  * of every eager bundle that imports this wrapper.
  */
 import type { ComponentProps } from "./MarkdownViewer";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, {
   FunctionComponent,
   LazyExoticComponent,
@@ -19,6 +21,8 @@ const MarkdownViewer: LazyExoticComponent<FunctionComponent<ComponentProps>> =
 const LazyMarkdownViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): JSX.Element => {
+  const translator: Translator = useTranslator();
+
   return (
     <Suspense
       fallback={
@@ -33,7 +37,9 @@ const LazyMarkdownViewer: FunctionComponent<ComponentProps> = (
         <span role="status" aria-live="polite" className="block space-y-2">
           <span className="block h-4 w-3/4 animate-pulse rounded bg-gray-100" />
           <span className="block h-4 w-1/2 animate-pulse rounded bg-gray-100" />
-          <span className="sr-only">Loading content</span>
+          <span className="sr-only">
+            {translator.translateText("Loading content")}
+          </span>
         </span>
       }
     >

package/UI/Components/Markdown.tsx/MarkdownConverters.ts

@@ -71,6 +71,8 @@ const RE_TASK_PREFIX: RegExp = /^\[[ xX]\]\s+/;
 const RE_TASK_ITEM: RegExp = /^\[([ xX])\]\s+(.*)$/;
 const RE_WHITESPACE_CHAR: RegExp = /\s/;
 const RE_LIST_START: RegExp = /^\s*\d+\s*$/;
+// A template variable, "{{incident.title}}", on one line and with no braces inside.
+const RE_TEMPLATE_VARIABLE: RegExp = /\{\{[^{}\n]*\}\}/g;
 
 // A tab advances to the next multiple of four columns, as in CommonMark.
 const TAB_WIDTH: number = 4;
@@ -153,6 +155,22 @@ const renderInline: (raw: string, tokens?: Array<InlineToken>) => string = (
     },
   );
 
+  /*
+   * A template's {{variables}} are text, never formatting. An incident custom
+   * field's key joins its words with underscores, and the italic pass below
+   * read "{{incident.customFields.on_call_lead}}" as "on" + italic "call" +
+   * "lead": the visual editor showed it slanted, and the next keystroke
+   * saved it back as "{{incident.customFields.on*call*lead}}", a variable
+   * nothing fills in. The same went for the text between two variables
+   * with an underscore each. Kept as typed, as the viewer (CommonMark, where
+   * an underscore inside a word is not emphasis) already shows them. Done
+   * after links and images, whose addresses may hold a variable, and their
+   * labels are rendered through here too.
+   */
+  s = s.replace(RE_TEMPLATE_VARIABLE, (variable: string): string => {
+    return stash(escapeText(variable));
+  });
+
   /*
    * Bold and italic at once. "***a***" is what the serializer writes for
    * <strong><em>a</em></strong> (text made bold and italic in the editor, or