@oneuptime/common 10.8.0 → 10.8.2

package/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts

@@ -378,6 +378,7 @@ import { AddRumApplicationRuleTables1780940998002 } from "./1780940998002-AddRum
 import { AddTelemetryResourceInventoryTables1780941762204 } from "./1780941762204-AddTelemetryResourceInventoryTables";
 import { AddRumApplicationSdkLanguage1780985763463 } from "./1780985763463-AddRumApplicationSdkLanguage";
 import { RecastCloudResourcesByEnvironment1780987192743 } from "./1780987192743-RecastCloudResourcesByEnvironment";
+import { MigrationName1781011482945 } from "./1781011482945-MigrationName";
 
 export default [
   InitialMigration,
@@ -760,4 +761,5 @@ export default [
   AddTelemetryResourceInventoryTables1780941762204,
   AddRumApplicationSdkLanguage1780985763463,
   RecastCloudResourcesByEnvironment1780987192743,
+  MigrationName1781011482945,
 ];

package/Server/Services/CloudResourceLabelRuleEngineService.ts

@@ -153,7 +153,10 @@ class CloudResourceLabelRuleEngineServiceClass {
     if (
       rule.descriptionRegexPattern &&
       (!cloudResource.description ||
-        !this.testRegex(rule.descriptionRegexPattern, cloudResource.description))
+        !this.testRegex(
+          rule.descriptionRegexPattern,
+          cloudResource.description,
+        ))
     ) {
       return false;
     }

package/Server/Services/CloudResourceOwnerRuleEngineService.ts

@@ -170,7 +170,10 @@ class CloudResourceOwnerRuleEngineServiceClass {
     if (
       rule.descriptionRegexPattern &&
       (!cloudResource.description ||
-        !this.testRegex(rule.descriptionRegexPattern, cloudResource.description))
+        !this.testRegex(
+          rule.descriptionRegexPattern,
+          cloudResource.description,
+        ))
     ) {
       return false;
     }

package/Server/Services/LogAggregationService.ts

@@ -165,40 +165,65 @@ export class LogAggregationService {
   private static buildHistogramStatement(request: HistogramRequest): Statement {
     const intervalSeconds: number = request.bucketSizeInMinutes * 60;
 
+    /*
+     * Two-stage aggregation mirroring TraceAggregationService.getHistogram.
+     * The inner query groups by toStartOfInterval(time, INTERVAL 1 MINUTE) —
+     * the exact key expression of the proj_severity_histogram projection
+     * (projectId, severityText, minute) — and filters the window on that same
+     * expression rather than raw `time`. A raw `time` predicate references a
+     * column the aggregate projection does not store, so ClickHouse rejects
+     * the projection and full-scans (verified: 2.1M rows / ~46ms vs 978 rows /
+     * ~7ms with this form). The outer query re-buckets the tiny minute-level
+     * result to the requested size. Window edges round to the minute, which is
+     * consistent with the minute-bucketed output and only shifts the first/last
+     * bucket by the partial boundary minute when the range is not minute-aligned.
+     *
+     * A non-projection filter (serviceId, traceId, spanId, attributes) makes
+     * the inner query transparently fall back to a base-table scan — same cost
+     * as before, still correct.
+     */
     const statement: Statement = SQL`
       SELECT
-        toStartOfInterval(time, INTERVAL ${{
+        toStartOfInterval(minute, INTERVAL ${{
           type: TableColumnType.Number,
           value: intervalSeconds,
         }} SECOND) AS bucket,
         severityText,
-        count() AS cnt
-      FROM ${LogAggregationService.TABLE_NAME}
-      WHERE projectId = ${{
-        type: TableColumnType.ObjectID,
-        value: request.projectId,
-      }}
-        AND time >= ${{
-          type: TableColumnType.Date,
-          value: request.startTime,
-        }}
-        AND time <= ${{
-          type: TableColumnType.Date,
-          value: request.endTime,
+        sum(cnt_minute) AS cnt
+      FROM (
+        SELECT
+          toStartOfInterval(time, INTERVAL 1 MINUTE) AS minute,
+          severityText,
+          count() AS cnt_minute
+        FROM ${LogAggregationService.TABLE_NAME}
+        WHERE projectId = ${{
+          type: TableColumnType.ObjectID,
+          value: request.projectId,
         }}
+          AND toStartOfInterval(time, INTERVAL 1 MINUTE) >= toStartOfInterval(${{
+            type: TableColumnType.Date,
+            value: request.startTime,
+          }}, INTERVAL 1 MINUTE)
+          AND toStartOfInterval(time, INTERVAL 1 MINUTE) <= toStartOfInterval(${{
+            type: TableColumnType.Date,
+            value: request.endTime,
+          }}, INTERVAL 1 MINUTE)
     `;
 
     LogAggregationService.appendCommonFilters(statement, request);
 
-    statement.append(" GROUP BY bucket, severityText ORDER BY bucket ASC");
+    statement.append(
+      " GROUP BY minute, severityText ) GROUP BY bucket, severityText ORDER BY bucket ASC",
+    );
 
     /*
      * Defense in depth: cap histogram runtime below nginx's 60s
      * proxy_read_timeout. 'break' returns partial aggregated results
      * rather than throwing, which is acceptable for a density viz.
+     * Explicitly enable projection use.
      */
     statement.append(
-      " SETTINGS max_execution_time = 45, timeout_overflow_mode = 'break'",
+      " SETTINGS max_execution_time = 45, timeout_overflow_mode = 'break', optimize_use_projections = 1",
     );
 
     return statement;

package/Server/Services/OpenTelemetryIngestService.ts

@@ -108,7 +108,9 @@ export default class OTelIngestService {
         attribute["value"] &&
         (attribute["value"] as JSONObject)["stringValue"]
       ) {
-        const value: unknown = (attribute["value"] as JSONObject)["stringValue"];
+        const value: unknown = (attribute["value"] as JSONObject)[
+          "stringValue"
+        ];
         if (typeof value === "string" && value.trim()) {
           return value.trim();
         }

package/Server/Services/RumApplicationLabelRuleEngineService.ts

@@ -153,7 +153,10 @@ class RumApplicationLabelRuleEngineServiceClass {
     if (
       rule.descriptionRegexPattern &&
       (!rumApplication.description ||
-        !this.testRegex(rule.descriptionRegexPattern, rumApplication.description))
+        !this.testRegex(
+          rule.descriptionRegexPattern,
+          rumApplication.description,
+        ))
     ) {
       return false;
     }

package/Server/Services/RumApplicationOwnerRuleEngineService.ts

@@ -170,7 +170,10 @@ class RumApplicationOwnerRuleEngineServiceClass {
     if (
       rule.descriptionRegexPattern &&
       (!rumApplication.description ||
-        !this.testRegex(rule.descriptionRegexPattern, rumApplication.description))
+        !this.testRegex(
+          rule.descriptionRegexPattern,
+          rumApplication.description,
+        ))
     ) {
       return false;
     }

package/Server/Services/ServerlessFunctionInstanceService.ts

@@ -47,8 +47,10 @@ export class Service extends DatabaseService<Model> {
       item.lastSeenAt = OneUptimeDate.getCurrentDate();
       await this.create({ data: item, props: { isRoot: true } });
     } catch (err) {
-      // Inventory is best-effort — a unique-violation race or transient error
-      // must never fail ingest.
+      /*
+       * Inventory is best-effort — a unique-violation race or transient error
+       * must never fail ingest.
+       */
       logger.warn(
         `ServerlessFunctionInstanceService.recordInstance failed: ${
           err instanceof Error ? err.message : String(err)

package/Server/Services/ServerlessFunctionLabelRuleEngineService.ts

@@ -126,7 +126,10 @@ class ServerlessFunctionLabelRuleEngineServiceClass {
     rule: ServerlessFunctionLabelRule,
   ): boolean {
     if (rule.matchLabels && rule.matchLabels.length > 0) {
-      if (!serverlessFunction.labels || serverlessFunction.labels.length === 0) {
+      if (
+        !serverlessFunction.labels ||
+        serverlessFunction.labels.length === 0
+      ) {
         return false;
       }
       const ruleLabelIds: Array<string> = rule.matchLabels.map((l: Label) => {
@@ -173,7 +176,9 @@ class ServerlessFunctionLabelRuleEngineServiceClass {
       const regex: RegExp = new RegExp(pattern, "i");
       return regex.test(value);
     } catch {
-      logger.warn(`Invalid regex in serverless function label rule: ${pattern}`);
+      logger.warn(
+        `Invalid regex in serverless function label rule: ${pattern}`,
+      );
       return false;
     }
   }

package/Server/Services/ServerlessFunctionOwnerRuleEngineService.ts

@@ -143,7 +143,10 @@ class ServerlessFunctionOwnerRuleEngineServiceClass {
     rule: ServerlessFunctionOwnerRule,
   ): boolean {
     if (rule.matchLabels && rule.matchLabels.length > 0) {
-      if (!serverlessFunction.labels || serverlessFunction.labels.length === 0) {
+      if (
+        !serverlessFunction.labels ||
+        serverlessFunction.labels.length === 0
+      ) {
         return false;
       }
       const ruleLabelIds: Array<string> = rule.matchLabels.map((l: Label) => {
@@ -190,7 +193,9 @@ class ServerlessFunctionOwnerRuleEngineServiceClass {
       const regex: RegExp = new RegExp(pattern, "i");
       return regex.test(value);
     } catch {
-      logger.warn(`Invalid regex in serverless function owner rule: ${pattern}`);
+      logger.warn(
+        `Invalid regex in serverless function owner rule: ${pattern}`,
+      );
       return false;
     }
   }

package/Server/Services/TraceAggregationService.ts

@@ -345,6 +345,121 @@ export class TraceAggregationService {
     return result;
   }
 
+  /*
+   * Accurate per-service and per-status counts over the FULL time window,
+   * computed with a real GROUP BY instead of the recent-N sample in
+   * getFacetValuesFromSample(). The sample saturates with whichever service
+   * is chattiest right now, so high-volume services that aren't in the most
+   * recent N root spans read 0 — the "top 1000" symptom. This GROUP BY is
+   * exact regardless of skew.
+   *
+   * It is cheap because it rides the proj_hist_by_minute aggregate projection
+   * (projectId, minute, serviceId, statusCode, isRootSpan -> count): a 1-month
+   * window reads a few thousand pre-aggregated minute rows in single-digit ms
+   * instead of scanning tens of millions of raw spans. Two things are required
+   * for ClickHouse to actually pick that projection, both load-bearing:
+   *   1. The time predicate must be on toStartOfMinute(startTime) — the
+   *      projection's key expression — NOT raw startTime. A raw startTime
+   *      filter references a column the aggregate projection does not store, so
+   *      ClickHouse rejects the projection and full-scans. (Window edges land
+   *      on minute boundaries, consistent with the minute-bucketed histogram.)
+   *   2. Every other predicate must be on a projection column. isRootSpan,
+   *      serviceId and statusCode all are, so the default sidebar load and
+   *      drill-down-by-service stay on the projection. A non-projection filter
+   *      (kind / name / traceId / attributes) transparently falls back to a
+   *      base-table scan — still correct, still bounded by max_execution_time.
+   *
+   * serviceId is intentionally NOT disambiguated by serviceType here. Resource
+   * IDs are globally unique, so a single serviceId -> count map correctly
+   * serves the service / host / docker host / k8s cluster facets once merged
+   * against each Postgres source-of-truth list (a host id never collides with
+   * a service id, so an unrelated entry is simply never looked up). Omitting
+   * the serviceType predicate keeps the query projection-eligible.
+   */
+  @CaptureSpan()
+  public static async getResourceFacetCounts(
+    request: MultiFacetRequest,
+  ): Promise<{
+    serviceCounts: Map<string, number>;
+    statusCounts: Map<string, number>;
+  }> {
+    const statement: Statement = new Statement();
+    statement.append(
+      `SELECT serviceId, statusCode, count() AS cnt FROM ${TraceAggregationService.TABLE_NAME}`,
+    );
+    statement.append(
+      SQL` WHERE projectId = ${{
+        type: TableColumnType.ObjectID,
+        value: request.projectId,
+      }} AND toStartOfMinute(startTime) >= toStartOfMinute(${{
+        type: TableColumnType.Date,
+        value: request.startTime,
+      }}) AND toStartOfMinute(startTime) <= toStartOfMinute(${{
+        type: TableColumnType.Date,
+        value: request.endTime,
+      }})`,
+    );
+
+    TraceAggregationService.appendCommonFilters(statement, request);
+
+    statement.append(" GROUP BY serviceId, statusCode");
+
+    /*
+     * Cap runtime below nginx's 60s proxy_read_timeout and explicitly allow
+     * projection use so proj_hist_by_minute is read when eligible (see the
+     * toStartOfMinute note above).
+     */
+    statement.append(
+      " SETTINGS max_execution_time = 45, timeout_overflow_mode = 'break', optimize_use_projections = 1",
+    );
+
+    const serviceCounts: Map<string, number> = new Map<string, number>();
+    const statusCounts: Map<string, number> = new Map<string, number>();
+
+    const dbResult: Results = await SpanService.executeQuery(statement);
+
+    let rows: Array<JSONObject> = [];
+    try {
+      const response: DbJSONResponse = await dbResult.json<{
+        data?: Array<JSONObject>;
+      }>();
+      rows = response.data || [];
+    } catch {
+      /*
+       * 'break' mode can return truncated JSON on timeout. Degrade to empty
+       * counts — the Postgres resolver still lists every resource (count 0),
+       * which is no worse than the prior transient-failure behavior.
+       */
+      logger.warn(
+        "Resource facet count query returned unparseable response, returning empty counts",
+      );
+      return { serviceCounts, statusCounts };
+    }
+
+    for (const row of rows) {
+      const cnt: number = Number(row["cnt"] || 0);
+
+      const rawServiceId: unknown = row["serviceId"];
+      if (rawServiceId !== undefined && rawServiceId !== null) {
+        const serviceId: string = String(rawServiceId);
+        if (serviceId.length > 0) {
+          serviceCounts.set(
+            serviceId,
+            (serviceCounts.get(serviceId) || 0) + cnt,
+          );
+        }
+      }
+
+      const rawStatusCode: unknown = row["statusCode"];
+      if (rawStatusCode !== undefined && rawStatusCode !== null) {
+        const statusCode: string = String(rawStatusCode);
+        statusCounts.set(statusCode, (statusCounts.get(statusCode) || 0) + cnt);
+      }
+    }
+
+    return { serviceCounts, statusCounts };
+  }
+
   private static mapStatusCodeToSeries(code: number): string {
     if (code === 1) {
       return "ok";
@@ -366,6 +481,15 @@ export class TraceAggregationService {
      * even for multi-week ranges. The outer query then re-buckets the tiny
      * minute-level result to the requested bucket size.
      *
+     * The time window is filtered on toStartOfMinute(startTime) — the
+     * projection's key expression — NOT raw startTime. A raw startTime
+     * predicate references a column the aggregate projection does not store,
+     * so ClickHouse rejects proj_hist_by_minute and full-scans the base table
+     * (verified: 32M rows / ~220ms vs 1.5K rows / ~6ms with this form). The
+     * window edges round to the minute, which is consistent with the
+     * minute-bucketed output and only shifts the first/last bucket by the
+     * partial boundary minute when the range is not minute-aligned.
+     *
      * If any non-projection filter (kind, name, traceId, nameSearchText,
      * attributes) is active, ClickHouse transparently falls back to
      * scanning the main table for the inner query — same cost as before.
@@ -388,14 +512,14 @@ export class TraceAggregationService {
           type: TableColumnType.ObjectID,
           value: request.projectId,
         }}
-          AND startTime >= ${{
+          AND toStartOfMinute(startTime) >= toStartOfMinute(${{
             type: TableColumnType.Date,
             value: request.startTime,
-          }}
-          AND startTime <= ${{
+          }})
+          AND toStartOfMinute(startTime) <= toStartOfMinute(${{
             type: TableColumnType.Date,
             value: request.endTime,
-          }}
+          }})
     `;
 
     TraceAggregationService.appendCommonFilters(statement, request);

package/Server/Utils/Telemetry/ResourceFacetResolver.ts

@@ -389,8 +389,8 @@ export default class ResourceFacetResolver {
       });
     }
 
-    const apps: Array<RumApplicationModel> =
-      await RumApplicationService.findBy({
+    const apps: Array<RumApplicationModel> = await RumApplicationService.findBy(
+      {
         query: query as any,
         select: {
           _id: true,
@@ -400,7 +400,8 @@ export default class ResourceFacetResolver {
         limit: new PositiveNumber(limit),
         skip: new PositiveNumber(0),
         props: { isRoot: true },
-      });
+      },
+    );
 
     return ResourceFacetResolver.mergeCounts(
       apps.map(

package/Types/Permission.ts

@@ -7627,7 +7627,8 @@ export class PermissionHelper {
       {
         permission: Permission.EditRumApplication,
         title: "Edit RUM Application",
-        description: "This permission can edit RUM Application of this project.",
+        description:
+          "This permission can edit RUM Application of this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: true,
         isRolePermission: false,
@@ -7636,7 +7637,8 @@ export class PermissionHelper {
       {
         permission: Permission.ReadRumApplication,
         title: "Read RUM Application",
-        description: "This permission can read RUM Application of this project.",
+        description:
+          "This permission can read RUM Application of this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: true,
         isRolePermission: false,

package/UI/Components/BulkUpdate/BulkLabelActions.tsx

@@ -208,9 +208,9 @@ function useBulkLabelActions<T extends BaseModel>(
    * modal offers only labels that can really be removed instead of every
    * label in the project.
    */
-  const loadLabelsForSelectedItems: (
+  const loadLabelsForSelectedItems: (items: Array<T>) => Promise<void> = async (
     items: Array<T>,
-  ) => Promise<void> = async (items: Array<T>): Promise<void> => {
+  ): Promise<void> => {
     setIsLoadingRemoveLabels(true);
 
     try {
@@ -259,20 +259,20 @@ function useBulkLabelActions<T extends BaseModel>(
         }
       }
 
-      const options: Array<DropdownOption> = Array.from(
-        labelById.values(),
-      ).map((label: Label) => {
-        const option: DropdownOption = {
-          label: label.name || "",
-          value: label._id?.toString() || "",
-        };
+      const options: Array<DropdownOption> = Array.from(labelById.values()).map(
+        (label: Label) => {
+          const option: DropdownOption = {
+            label: label.name || "",
+            value: label._id?.toString() || "",
+          };
 
-        if (label.color) {
-          option.color = label.color;
-        }
+          if (label.color) {
+            option.color = label.color;
+          }
 
-        return option;
-      });
+          return option;
+        },
+      );
 
       options.sort((a: DropdownOption, b: DropdownOption) => {
         return a.label.localeCompare(b.label);

package/UI/Components/Forms/Fields/FormField.tsx

@@ -40,6 +40,7 @@ import Radio, { RadioValue } from "../../Radio/Radio";
 import { BasicRadioButtonOption } from "../../RadioButtons/BasicRadioButtons";
 import HorizontalRule from "../../HorizontalRule/HorizontalRule";
 import MarkdownEditor from "../../Markdown.tsx/MarkdownEditor";
+import useTranslateValue from "../../../Utils/Translation";
 
 export interface ComponentProps<T extends GenericObject> {
   field: Field<T>;
@@ -61,6 +62,11 @@ const FormField: <T extends GenericObject>(
 ) => ReactElement = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+  const translatedPlaceholder: string | undefined = translateString(
+    props.field.placeholder,
+  );
+
   type onChangeFunction = (value: JSONValue) => void;
 
   const onChange: onChangeFunction = (value: JSONValue): void => {
@@ -337,7 +343,7 @@ const FormField: <T extends GenericObject>(
                 (props.field.defaultValue as any) ||
                 undefined
               }
-              placeholder={props.field.placeholder || undefined}
+              placeholder={translatedPlaceholder || undefined}
             />
           )}
 
@@ -351,7 +357,7 @@ const FormField: <T extends GenericObject>(
                 props.setFieldTouched(props.fieldName, true);
               }}
               tabIndex={index}
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
               initialValue={
                 props.currentValues &&
                 (props.currentValues as any)[props.fieldName]
@@ -371,7 +377,7 @@ const FormField: <T extends GenericObject>(
                 props.setFieldTouched(props.fieldName, true);
               }}
               tabIndex={index}
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
               initialValue={
                 props.currentValues &&
                 (props.currentValues as any)[props.fieldName]
@@ -414,7 +420,7 @@ const FormField: <T extends GenericObject>(
                 labelField={props.field.dropdownModal.labelField}
                 valueField={props.field.dropdownModal.valueField}
                 options={props.field.dropdownOptions || []}
-                placeholder={props.field.placeholder || ""}
+                placeholder={translatedPlaceholder || ""}
                 value={
                   props.currentValues &&
                   (props.currentValues as any)[props.fieldName]
@@ -442,7 +448,7 @@ const FormField: <T extends GenericObject>(
                   FormFieldSchemaType.MultiSelectDropdown
                 }
                 options={props.field.dropdownOptions || []}
-                placeholder={props.field.placeholder || ""}
+                placeholder={translatedPlaceholder || ""}
                 value={
                   props.currentValues &&
                   (props.currentValues as any)[props.fieldName]
@@ -585,7 +591,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : ""
               }
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
             />
           )}
 
@@ -614,7 +620,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : ""
               }
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
             />
           )}
 
@@ -637,7 +643,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : ""
               }
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
             />
           )}
 
@@ -660,7 +666,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : "",
 
-              placeholder: props.field.placeholder || "",
+              placeholder: translatedPlaceholder || "",
             })}
 
           {(props.field.fieldType === FormFieldSchemaType.HTML ||
@@ -684,7 +690,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : ""
               }
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
             />
           )}
 
@@ -741,7 +747,7 @@ const FormField: <T extends GenericObject>(
                     ? []
                     : undefined
               }
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
             />
           )}
 
@@ -849,7 +855,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : props.field.defaultValue || ""
               }
-              placeholder={props.field.placeholder || ""}
+              placeholder={translatedPlaceholder || ""}
             />
           )}
         </div>

package/UI/Components/Input/Input.tsx

@@ -1,5 +1,6 @@
 // Tailwind
 import { Logger } from "../../Utils/Logger";
+import useTranslateValue from "../../Utils/Translation";
 import Icon from "../Icon/Icon";
 import OneUptimeDate from "../../../Types/Date";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -46,6 +47,7 @@ export interface ComponentProps {
 const Input: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   let className: string = "";
 
   if (!props.className) {
@@ -199,7 +201,7 @@ const Input: FunctionComponent<ComponentProps> = (
               ? "1"
               : undefined
           }
-          placeholder={props.placeholder}
+          placeholder={translateString(props.placeholder)}
           className={className}
           onBlur={() => {
             if (props.onBlur) {

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}