@oneuptime/common 10.8.1 → 11.0.0

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -137,11 +137,13 @@ interface IndexedItem {
 interface MenuGroup {
   category: string;
   items: IndexedItem[];
+  isRecent: boolean;
 }
 
 interface RawGroup {
   category: string;
   items: MoreMenuItem[];
+  isRecent: boolean;
 }
 
 const NavBarMenuModal: FunctionComponent<ComponentProps> = (
@@ -230,7 +232,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
       byCategory.get(category)!.push(item);
     });
     return order.map((category: string) => {
-      return { category, items: byCategory.get(category)! };
+      return { category, items: byCategory.get(category)!, isRecent: false };
     });
   }, [filteredItems]);
 
@@ -242,7 +244,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
   const displayGroups: MenuGroup[] = useMemo(() => {
     const raw: RawGroup[] = [];
     if (!query.trim() && recentItems.length > 0) {
-      raw.push({ category: recentLabel, items: recentItems });
+      raw.push({ category: recentLabel, items: recentItems, isRecent: true });
     }
     raw.push(...categoryGroups);
 
@@ -253,7 +255,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
         flatIndex++;
         return entry;
       });
-      return { category: group.category, items };
+      return { category: group.category, items, isRecent: group.isRecent };
     });
   }, [query, recentItems, categoryGroups, recentLabel]);
 
@@ -444,7 +446,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
     >
       {/* Backdrop */}
       <div
-        className={`fixed inset-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm transition-opacity duration-200 ${
+        className={`fixed inset-0 bg-gray-900/50 backdrop-blur-sm transition-opacity duration-200 ${
           isShown ? "opacity-100" : "opacity-0"
         }`}
       />
@@ -456,8 +458,10 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
       >
         <div className="flex min-h-full items-start justify-center p-4 sm:p-6">
           <div
-            className={`relative mt-[6vh] flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-out ${
-              isShown ? "scale-100 opacity-100" : "scale-95 opacity-0"
+            className={`relative mt-[6vh] flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-gray-900/5 transition-all duration-200 ease-out ${
+              isShown
+                ? "translate-y-0 scale-100 opacity-100"
+                : "translate-y-2 scale-[0.98] opacity-0"
             }`}
             style={{ maxHeight: "80vh" }}
             onClick={(event: React.MouseEvent<HTMLDivElement>) => {
@@ -465,7 +469,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
             }}
           >
             {/* Search header */}
-            <div className="flex items-center gap-3 border-b border-gray-100 px-4 py-3">
+            <div className="flex items-center gap-3 border-b border-gray-100 px-5 py-4">
               <Icon
                 icon={IconProp.Search}
                 className="h-5 w-5 flex-shrink-0 text-gray-400"
@@ -482,6 +486,10 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                     : undefined
                 }
                 aria-label={props.searchPlaceholder || "Search products"}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck={false}
                 value={query}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setQuery(event.target.value);
@@ -490,9 +498,23 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 placeholder={props.searchPlaceholder || "Search…"}
                 className="flex-1 border-0 bg-transparent p-0 text-base text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-0"
               />
-              <kbd className="hidden items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs font-medium text-gray-400 sm:inline-flex">
-                {shortcutLabel}
-              </kbd>
+              {query ? (
+                <button
+                  type="button"
+                  aria-label="Clear search"
+                  onClick={() => {
+                    setQuery("");
+                    inputRef.current?.focus();
+                  }}
+                  className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+                >
+                  <Icon icon={IconProp.Close} className="h-4 w-4" />
+                </button>
+              ) : (
+                <kbd className="hidden items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs font-medium text-gray-400 sm:inline-flex">
+                  {shortcutLabel}
+                </kbd>
+              )}
             </div>
 
             {/* Body */}
@@ -500,19 +522,21 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
               id="navbar-menu-listbox"
               role="listbox"
               aria-label="Products"
-              className="flex-1 overflow-y-auto px-4 py-4"
+              className="flex-1 overflow-y-auto overscroll-contain px-5 pb-5 pt-4"
             >
               {flatItems.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-16 text-center">
-                  <Icon
-                    icon={IconProp.Search}
-                    className="mb-3 h-8 w-8 text-gray-300"
-                  />
-                  <p className="text-sm text-gray-500">
+                  <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-50 ring-1 ring-gray-100">
+                    <Icon
+                      icon={IconProp.Search}
+                      className="h-5 w-5 text-gray-400"
+                    />
+                  </div>
+                  <p className="text-sm font-medium text-gray-900">
                     {props.noResultsText || "No results found."}
                   </p>
                   {query && (
-                    <p className="mt-1 text-xs text-gray-400">
+                    <p className="mt-1 text-xs text-gray-500">
                       &ldquo;{query}&rdquo;
                     </p>
                   )}
@@ -521,10 +545,18 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 displayGroups.map((group: MenuGroup) => {
                   return (
                     <div key={group.category} className="mb-6 last:mb-1">
-                      <h3 className="mb-2 px-1 text-xs font-semibold uppercase tracking-wider text-gray-500">
-                        {group.category}
-                      </h3>
-                      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+                      <div className="mb-2.5 flex items-center gap-1.5 px-1">
+                        {group.isRecent && (
+                          <Icon
+                            icon={IconProp.Clock}
+                            className="h-3.5 w-3.5 text-gray-500"
+                          />
+                        )}
+                        <h3 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-gray-500">
+                          {group.category}
+                        </h3>
+                      </div>
+                      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                         {group.items.map((entry: IndexedItem) => {
                           const item: MoreMenuItem = entry.item;
                           const flatIndex: number = entry.flatIndex;
@@ -543,43 +575,44 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                               ref={(element: HTMLDivElement | null) => {
                                 cellRefs.current[flatIndex] = element;
                               }}
-                              onMouseEnter={() => {
+                              onMouseMove={() => {
                                 setActiveIndex(flatIndex);
                               }}
-                              className="relative"
                             >
-                              {isCurrent && (
-                                <span
-                                  aria-hidden="true"
-                                  className="absolute right-2 top-2 z-10 h-2 w-2 rounded-full bg-indigo-500 ring-2 ring-white"
-                                />
-                              )}
                               <Link
                                 to={item.route}
                                 onClick={() => {
                                   selectItem(item);
                                 }}
-                                className={`group flex h-full flex-col items-center gap-2 rounded-xl p-3 text-center transition-all duration-150 ${
+                                className={`group flex h-full items-start gap-3 rounded-xl border p-3 text-left transition-colors duration-150 ${
                                   isActive
-                                    ? "scale-[1.03] bg-indigo-50 shadow-sm ring-2 ring-indigo-400"
+                                    ? "border-indigo-300 bg-indigo-50 shadow-sm"
                                     : isCurrent
-                                      ? "bg-indigo-50/60 ring-1 ring-indigo-200 hover:bg-indigo-50"
-                                      : "hover:bg-gray-50"
+                                      ? "border-indigo-100 bg-indigo-50/40"
+                                      : "border-transparent"
                                 }`}
                               >
                                 <div
-                                  className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl ${colors.bg} ring-1 ${colors.ring}`}
+                                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${colors.bg} ring-1 ${colors.ring}`}
                                 >
                                   <Icon
                                     icon={item.icon}
-                                    className={`h-6 w-6 transition-transform duration-150 group-hover:scale-110 ${colors.text}`}
+                                    className={`h-5 w-5 transition-transform duration-150 group-hover:scale-110 ${colors.text}`}
                                   />
                                 </div>
-                                <div className="w-full">
-                                  <p className="text-sm font-medium text-gray-900">
-                                    {highlightMatch(item.title)}
+                                <div className="min-w-0 flex-1">
+                                  <p className="flex items-center gap-1.5 text-sm font-medium text-gray-900">
+                                    <span className="truncate">
+                                      {highlightMatch(item.title)}
+                                    </span>
+                                    {isCurrent && (
+                                      <span
+                                        aria-hidden="true"
+                                        className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-indigo-500"
+                                      />
+                                    )}
                                   </p>
-                                  <p className="mt-0.5 text-xs leading-snug text-gray-500 line-clamp-2">
+                                  <p className="mt-0.5 text-xs leading-relaxed text-gray-500 line-clamp-2">
                                     {highlightMatch(item.description)}
                                   </p>
                                 </div>
@@ -596,21 +629,25 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
 
             {/* Footer */}
             {props.footer && (
-              <div className="flex items-center justify-between gap-4 border-t border-gray-100 bg-gray-50 px-4 py-3">
+              <div className="flex items-center justify-between gap-4 border-t border-gray-100 bg-gray-50/80 px-5 py-3">
                 <Link
                   to={props.footer.link}
                   openInNewTab={true}
                   className="group flex min-w-0 items-center gap-3"
                 >
-                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 ring-1 ring-gray-200 transition-all group-hover:bg-gray-200">
+                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gray-900 transition-colors group-hover:bg-gray-700">
                     <Icon
                       icon={IconProp.GitHub}
-                      className="h-4 w-4 text-gray-700"
+                      className="h-4 w-4 text-white"
                     />
                   </div>
                   <div className="min-w-0 text-left">
-                    <p className="truncate text-sm font-medium text-gray-900">
-                      {props.footer.title}
+                    <p className="flex items-center gap-1 text-sm font-medium text-gray-900">
+                      <span className="truncate">{props.footer.title}</span>
+                      <Icon
+                        icon={IconProp.ExternalLink}
+                        className="h-3 w-3 flex-shrink-0 text-gray-400 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+                      />
                     </p>
                     <p className="truncate text-xs text-gray-500">
                       {props.footer.description}

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -92,6 +92,17 @@ export interface TelemetryViewerProps<T> {
   onHistogramTimeRangeSelect?:
     | ((startTime: Date, endTime: Date) => void)
     | undefined;
+  // Extra controls in the histogram header (e.g. a chart-metric selector).
+  histogramHeaderActions?: ReactNode;
+  // Y-axis / tooltip value formatting (e.g. latency metrics in ms).
+  histogramValueFormatter?: ((value: number) => string) | undefined;
+
+  /*
+   * When set, replaces the histogram + facet sidebar + list with the given
+   * content (e.g. an analytics view). The toolbar, search bar, and active
+   * filter chips stay, so the override content can consume the same filters.
+   */
+  mainContentOverride?: ReactNode;
 
   // -- Pagination --
   page: number;
@@ -201,19 +212,31 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
         />
       )}
 
+      {/* Main content override (e.g. analytics view) */}
+      {props.mainContentOverride}
+
       {/* Histogram */}
-      {showHistogram && props.histogramBuckets && props.histogramSeries && (
-        <TelemetryHistogram
-          buckets={props.histogramBuckets}
-          isLoading={props.histogramLoading || false}
-          series={props.histogramSeries}
-          title={props.histogramTitle}
-          onTimeRangeSelect={props.onHistogramTimeRangeSelect}
-        />
-      )}
+      {!props.mainContentOverride &&
+        showHistogram &&
+        props.histogramBuckets &&
+        props.histogramSeries && (
+          <TelemetryHistogram
+            buckets={props.histogramBuckets}
+            isLoading={props.histogramLoading || false}
+            series={props.histogramSeries}
+            title={props.histogramTitle}
+            onTimeRangeSelect={props.onHistogramTimeRangeSelect}
+            headerActions={props.histogramHeaderActions}
+            valueFormatter={props.histogramValueFormatter}
+          />
+        )}
 
       {/* Main area: facets + list */}
-      <div className="flex min-h-0 flex-1 gap-3">
+      <div
+        className={`flex min-h-0 flex-1 gap-3 ${
+          props.mainContentOverride ? "hidden" : ""
+        }`}
+      >
         {showFacets && (
           <TelemetryFacetSidebar
             facetData={props.facetData || {}}

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

@@ -41,12 +41,27 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
   const activeValuesByKey: Record<string, Set<string>> = useMemo(() => {
     const map: Record<string, Set<string>> = {};
 
+    const add: (key: string, value: string) => void = (
+      key: string,
+      value: string,
+    ): void => {
+      if (!map[key]) {
+        map[key] = new Set<string>();
+      }
+      map[key]!.add(value);
+    };
+
     if (props.activeFilters) {
       for (const filter of props.activeFilters) {
-        if (!map[filter.facetKey]) {
-          map[filter.facetKey] = new Set<string>();
+        add(filter.facetKey, filter.value);
+        /*
+         * Attribute-backed facets store chips as `attributes.<key>` while
+         * the facet config is keyed by the raw attribute key — index both
+         * so the facet row shows its selected state.
+         */
+        if (filter.facetKey.startsWith("attributes.")) {
+          add(filter.facetKey.substring("attributes.".length), filter.value);
         }
-        map[filter.facetKey]!.add(filter.value);
       }
     }
 

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

@@ -1,6 +1,7 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  ReactNode,
   useMemo,
   useCallback,
   useRef,
@@ -30,6 +31,10 @@ export interface TelemetryHistogramProps {
   series: Array<HistogramSeriesOption>;
   title?: string | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  // Extra controls rendered in the chart header (e.g. a metric selector).
+  headerActions?: ReactNode;
+  // Formats Y-axis ticks and tooltip values (e.g. milliseconds → "1.2 s").
+  valueFormatter?: ((value: number) => string) | undefined;
 }
 
 interface PivotedRow {
@@ -173,7 +178,12 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
     );
   }
 
-  if (pivotedData.length === 0) {
+  /*
+   * With header actions (e.g. a metric selector) the header must survive an
+   * empty result, or switching away from a metric with no data would strand
+   * the user with no control to switch back.
+   */
+  if (pivotedData.length === 0 && !props.headerActions) {
     return <></>;
   }
 
@@ -202,77 +212,90 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
               </div>
             );
           })}
+          {props.headerActions}
         </div>
       </div>
-
-      <div
-        className="px-2 pb-1 pt-2"
-        style={{
-          height: 120,
-          cursor: props.onTimeRangeSelect ? "crosshair" : "default",
-        }}
-      >
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={pivotedData}
-            margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            barCategoryGap="15%"
-            barGap={0}
-          >
-            <XAxis
-              dataKey="time"
-              tickFormatter={formatTickTime}
-              tick={{ fontSize: 10, fill: "#9ca3af" }}
-              axisLine={{ stroke: "#e5e7eb" }}
-              tickLine={false}
-              minTickGap={40}
-              dy={4}
-              interval="preserveStartEnd"
-            />
-            <YAxis
-              tick={{ fontSize: 10, fill: "#9ca3af" }}
-              axisLine={false}
-              tickLine={false}
-              width={48}
-              allowDecimals={false}
-              tickFormatter={formatYAxisTick}
-            />
-            <Tooltip
-              content={<TelemetryHistogramTooltip seriesByKey={seriesByKey} />}
-              cursor={{ fill: "rgba(99,102,241,0.06)" }}
-            />
-            {activeSeries.map(
-              (option: HistogramSeriesOption, index: number) => {
-                const isLast: boolean = index === activeSeries.length - 1;
-                return (
-                  <Bar
-                    key={option.key}
-                    dataKey={option.key}
-                    stackId="series"
-                    fill={option.color}
-                    radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
-                    isAnimationActive={false}
-                    maxBarSize={24}
+      {pivotedData.length === 0 && (
+        <div className="flex h-[120px] items-center justify-center text-xs text-gray-400">
+          No data for this metric in the selected range
+        </div>
+      )}
+
+      {pivotedData.length > 0 && (
+        <div
+          className="px-2 pb-1 pt-2"
+          style={{
+            height: 120,
+            cursor: props.onTimeRangeSelect ? "crosshair" : "default",
+          }}
+        >
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={pivotedData}
+              margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              barCategoryGap="15%"
+              barGap={0}
+            >
+              <XAxis
+                dataKey="time"
+                tickFormatter={formatTickTime}
+                tick={{ fontSize: 10, fill: "#9ca3af" }}
+                axisLine={{ stroke: "#e5e7eb" }}
+                tickLine={false}
+                minTickGap={40}
+                dy={4}
+                interval="preserveStartEnd"
+              />
+              <YAxis
+                tick={{ fontSize: 10, fill: "#9ca3af" }}
+                axisLine={false}
+                tickLine={false}
+                width={48}
+                allowDecimals={Boolean(props.valueFormatter)}
+                tickFormatter={props.valueFormatter || formatYAxisTick}
+              />
+              <Tooltip
+                content={
+                  <TelemetryHistogramTooltip
+                    seriesByKey={seriesByKey}
+                    valueFormatter={props.valueFormatter}
                   />
-                );
-              },
-            )}
-            {selectionStart && selectionEnd && (
-              <ReferenceArea
-                x1={selectionStart}
-                x2={selectionEnd}
-                fill="rgba(99,102,241,0.12)"
-                stroke="rgba(99,102,241,0.5)"
-                strokeWidth={1}
-                radius={2}
+                }
+                cursor={{ fill: "rgba(99,102,241,0.06)" }}
               />
-            )}
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
+              {activeSeries.map(
+                (option: HistogramSeriesOption, index: number) => {
+                  const isLast: boolean = index === activeSeries.length - 1;
+                  return (
+                    <Bar
+                      key={option.key}
+                      dataKey={option.key}
+                      stackId="series"
+                      fill={option.color}
+                      radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
+                      isAnimationActive={false}
+                      maxBarSize={24}
+                    />
+                  );
+                },
+              )}
+              {selectionStart && selectionEnd && (
+                <ReferenceArea
+                  x1={selectionStart}
+                  x2={selectionEnd}
+                  fill="rgba(99,102,241,0.12)"
+                  stroke="rgba(99,102,241,0.5)"
+                  strokeWidth={1}
+                  radius={2}
+                />
+              )}
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -16,6 +16,11 @@ export interface TelemetryHistogramTooltipProps {
     payload: Record<string, number>;
   }>;
   seriesByKey: Record<string, HistogramSeriesOption>;
+  /*
+   * Formats values (e.g. milliseconds for latency series). When set, the
+   * Total row is suppressed — summing percentiles is meaningless.
+   */
+  valueFormatter?: ((value: number) => string) | undefined;
 }
 
 function formatTooltipTime(label: string | undefined): string {
@@ -104,13 +109,15 @@ const TelemetryHistogramTooltip: FunctionComponent<
                 <span className="text-xs text-gray-600">{label}</span>
               </div>
               <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">
-                {entry.count.toLocaleString()}
+                {props.valueFormatter
+                  ? props.valueFormatter(entry.count)
+                  : entry.count.toLocaleString()}
               </span>
             </div>
           );
         })}
       </div>
-      {entries.length > 1 && (
+      {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="font-mono text-xs font-semibold tabular-nums text-gray-800">

package/UI/Components/TextArea/TextArea.tsx

@@ -1,5 +1,6 @@
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -25,6 +26,7 @@ export interface ComponentProps {
 const TextArea: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   const [text, setText] = useState<string>(props.initialValue || "");
 
   let className: string = "";
@@ -61,7 +63,7 @@ const TextArea: FunctionComponent<ComponentProps> = (
       <div className="relative mt-2 mb-1 rounded-md shadow-sm">
         <textarea
           autoFocus={props.autoFocus}
-          placeholder={props.placeholder}
+          placeholder={translateString(props.placeholder)}
           data-testid={props.dataTestId}
           className={`${className || ""}`}
           value={text}

package/UI/Components/Toast/Toast.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 
 export enum ToastType {
   DANGER,
@@ -22,6 +23,7 @@ export interface ComponentProps {
 const Component: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   const [show, setShow] = useState<boolean>(true);
   let typeCssClass: string = "text-gray-400";
   let iconType: IconProp = IconProp.Info;
@@ -80,13 +82,13 @@ const Component: FunctionComponent<ComponentProps> = (
                     data-testid="title"
                     className="text-sm font-medium text-gray-900"
                   >
-                    {props.title}
+                    {translateString(props.title)}
                   </p>
                   <p
                     data-testid="description"
                     className="mt-1 text-sm text-gray-500"
                   >
-                    {props.description}
+                    {translateString(props.description)}
                   </p>
                   {/* <div className="mt-3 flex space-x-7">
                     <button type="button" className="rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Undo</button>

package/UI/Utils/LogExport.ts

@@ -42,7 +42,7 @@ function getLogFieldValue(log: Log, columnId: string): string {
     case "time":
       return log.time ? new Date(log.time).toISOString() : "";
     case "service":
-      return log.serviceId?.toString() || "";
+      return log.primaryEntityId?.toString() || "";
     case "severity":
       return log.severityText?.toString() || "";
     case "message":
@@ -104,7 +104,7 @@ export function exportLogsToJSON(logs: Array<Log>): string {
   const data: Array<JSONObject> = logs.map((log: Log) => {
     const obj: JSONObject = {};
     obj["time"] = log.time ? new Date(log.time).toISOString() : null;
-    obj["serviceId"] = log.serviceId?.toString() || null;
+    obj["primaryEntityId"] = log.primaryEntityId?.toString() || null;
     obj["severity"] = log.severityText?.toString() || null;
     obj["severityNumber"] = log.severityNumber || null;
     obj["body"] = log.body || null;